Truncating longer page titles with an ellipsis slideshare

568 views
538 views

Published on

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.
Here is the link to the full blog post: http://jbkflex.wordpress.com/2012/01/16/truncating-longer-page-titles-with-an-ellipsis-html5-mobile-web-app/

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
568
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Truncating longer page titles with an ellipsis slideshare

  1. 1. Truncating longer page titles with an ellipsis – HTML5 MobileWeb apphttp://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 pageheader bar. Normally in native iPhone apps when the page title gets longer they add an ellipsis to the end of thetruncated text. Check out the image of the iPhone settings – Mail, Contacts, Calendar page below, see how thelong text has been truncated with a trailing ellipsis. Therefore, while building mobile web apps I do the same to give itan iPhone look and feel. Let’s see how to do it using simple CSS techniques. Mail, Contacts, Calendar page in iPhone settingsWhat 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 thetext 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;
  2. 2. 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,
  3. 3. Long text wrapped in next lineThe CSS trick to add ellipsisLet’s see how to add an ellipsis. The image below shows the same long text, but now I have added an ellipsis usingsimple CSS tricks, Long text truncated with trailing ellipsis
  4. 4. 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;
  5. 5. 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));}
  6. 6. .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);
  7. 7. }</script></html>

×