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!
Update: Dynamic width div & ellipsis text
Last updates: 12 Dec 2014
Here is some little tricks to deal with responsive / different width of screen:
Wrap the h1 tag with a div with ID – “title_wrapper”, then write your css as below:
#header .title_wrapper {
display: table;
table-layout: fixed;
width:100%;
}
#header .title_wrapper h1 {
display: table-cell;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
word-wrap: break-word;
}
That’s it! Now your page title works well across different screen sizes! It’s very useful, if you are developing responsive website. Share this useful tricks to your friends, teammates or co-workers!