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!


  • Launch Native iOS Google Maps Via Your Web App
  • Speed Up Page Loads Time Using Prefetch / Prerender
  • Testing & Troubleshooting Retina Display Content Without Actual Device

  • 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