onlyWebPro .com - For Designers & Developers

The Problem

Sometimes, we may have a page of our mobile website or mobile app with a long title fit in the header bar as shown in the picture below. This would be make our website or app looks ugly with such 3 lines of text.

Problem: The title of the page is too long.

Instead, we can overcome this problem by applying some little-known CSS tricks.

The Solution

Here is the solution to solve the long page title. We could write the header h1 tag’s CSS as following:

#header h1 {
	width: 320px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

The “text-overflow: ellipsis” declaration allows us to append 3 dots to the text that doesn’t fit into the header bar. Please take note that the “text-overflow: ellipsis” only works well when you have specified the “width“, “white-space: nowrap” and “overflow:hidden” to the header h1 tag.

The “white-space: nowrap” here is to instruct the browser NOT to break the long text into 2 lines. Without this, the h1 will just accomodate the long text in the defined width of header bar.

Here is the output with the solution:

Solution: 3 dots appended to the end of chopped-off title.

Pretty simple right? Share this little-known trick to your colleagues, friends and other web workers!

Do you have any you CSS tricks? Please do share it with us on the comment section!