Home » Tutorials » HTML & CSS » Handling Long Page Title of Mobile Web With Little-Known CSS Tricks

Handling Long Page Title of Mobile Web With Little-Known CSS Tricks

Handling Long Page Title of Mobile Web With Little-Known CSS Tricks

  • Stumble it!
  • Share

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.

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.

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!


  • Create jQuery Responsive Content Slider For Mobile In 5 Minutes!
  • Replacing jQuery Animation With CSS Hardware Accelerated
  • Launch Native iOS Google Maps Via Your Web App

  • Isaac

    This is cool. Usually I use to write a function to do this job.

    • http://www.onlywebpro.com onlyWebPro

      Hi Issac,

      Thanks for your comment. :)

      What kind of function have you use to chop-off long title? Do you mind to share your code here with other web developers?

  • http://blog.marlonpacheco.com.br/ Marlon Pacheco

    Great tip !

Android, iOS Development Tutorials