Truncating longer page titles with an ellipsis – HTML5 Mobile Web app

Sometimes, while working on HTML5 mobile web apps the text in the page title gets longer than can fit in the page header bar. Normally in native iPhone apps when the page title gets longer they add an ellipsis to the end of the truncated text. Check out the image of the iPhone settings – Mail, Contacts, Calendar page below, see how the long text has been truncated with a trailing ellipsis. Therefore, while building mobile web apps I do the same to give it an iPhone look and feel. Let’s see how to do it using simple CSS techniques.

Mail, Contacts, Calendar
Mail, Contacts, Calendar page in iPhone settings

What happens if we do not truncate long text?
I have a very simple setup of a mobile web page below. The page has a header with a very long text. See, how the text is wrapped in the next line to fit it. This is not very iPhonish and certainly not what we want isn’t it.

.pageHeader
{
  width:100%;
  line-height:40px;
  padding:5px 0 0 5px;
  color: #fff;
  display: block;
  background-color:#354F6E;
  border-bottom:1px solid #999999;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7c9bc0), color-stop(2%, #416086), color-stop(100%, #293e56));
}

.pageHeader h2
{
  font-size: 17px;
  font-weight: bold;
}

<body>
  <div id="wrapper">
    <header>
      <h2>This is a very very very very very long text</h2>
    </header>
  </div>
</body>

And this is the result,

Long text wrapped in next line
Long text wrapped in next line

The CSS trick to add ellipsis
Let’s see how to add an ellipsis. The image below shows the same long text, but now I have added an ellipsis using simple CSS tricks,

Long text truncated with trailing ellipsis
Long text truncated with trailing ellipsis

To add an ellipsis I just added the four lines to the CSS style for h2. This is how it is looks now,

.pageHeader h2
{
  font-size: 17px;
  font-weight: bold;
  /*4 properties below are imp for trailing ellipsis*/
  max-width: 210px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Now, let’s get over each of them.

  1. max-width limits the width of h2 element to 200px. So it will not grow wider than 200px to auto fit the text.
  2. overflow:hidden ensures that anything that is outside the element boundary will be cut off.
  3. white-space: nowrap ensures that the line is not broken into two. If we do not provide it, the text line will break into two and will grow taller to accommodate the text within the maximum width.
  4. And finally, text-overflow:ellipsis adds three trailing dots to the cut off text.

The last CSS rule, text-overflow is a very little used and little known CSS trick, but is an important one.

The full code block is below,

<!DOCTYPE html>
<html>
<head>
<title>Truncating long text with trailing ellipsis...</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0;"/>
<style type="text/css">
*{
  margin:0;
  padding:0;
}
html,body
{
  font-family:Helvetica;
}
#wrapper
{
  width:320px;
  height:416px;
  overflow:hidden;
  background-color:#ccc;
}
.pageHeader
{
  width:100%;
  line-height:40px;
  padding:5px 0 0 5px;
  color: #fff;
  display: block;
  background-color:#354F6E;
  border-bottom:1px solid #999999;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7c9bc0), color-stop(2%, #416086), color-stop(100%, #293e56));
}
.pageHeader h2
{
  font-size: 17px;
  font-weight: bold;
  /*4 properties below are imp for trailing ellipsis*/
  max-width: 210px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

</style>
</head>
<body>
  <div id="wrapper">
    <header class="pageHeader">
      <h2>This is a very very very very very long text</h2>
    </header>
  </div>
</body>
<script type="text/javascript">
  window.addEventListener("load", initApp, false);
  function initApp() {
    setTimeout(function() { window.scrollTo(0,1); }, 20);
  }
</script>
</html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s