Truncating longer page titles with an ellipsis slideshare

Truncating longer page titles with an ellipsis – HTML5 Mobile
Web app
http://jbkflex.wordpress.com/2012/01/16/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 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

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

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);

Truncating longer page titles with an ellipsis slideshare

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

Truncating longer page titles with an ellipsis slideshare