Using Text-Overflow

July 21, 2004

I am sure many of you have used the css property overflow. It works great for making divs scroll or getting that pixel perfect box. Well, I was rummaging through gmail’s source code (which they have made quite difficult to do) and ran across the text-overflow property, and what a beauty this one is. I usually go to our programmer when I need to have a limit on the number of characters allowed in a paragraph or table cell. No more do I need his help with this matter.

The text-overflow property defines what should happen when you have text that falls outside of it margins. See the example below.

.box {
        margin: 0 20px;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
	border: 1px dashed #333;
	width: 300px;
	padding: 10px;
	  }

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce et nulla sed nunc suscipit tincidunt. Cras ornare mi sed eros viverra vulputate. Nunc eleifend. Mauris posuere turpis et nulla. Curabitur tempor magna ut nibh. Suspendisse tristique porttitor velit. Donec sit amet purus. Maecenas commodo, metus nec commodo dignissim, tortor neque luctus wisi, eu congue ante wisi aliquam lacus. Donec pharetra ultricies arcu. Mauris vitae tellus. Sed pretium, metus in porta accumsan, augue lectus semper metus, vitae vehicula nisl dui ac nisl. Vivamus eget ipsum. Quisque congue lacus. Aliquam ligula dolor, placerat quis, varius ac, laoreet vel, massa.

You will note that it cut off the text after 300 pixels. Doesn’t the overflow property do that already, you ask? Yes, it does but open this page in Internet Explorer and you will see that it has added ellipsis (…) to the end of that line where it cut it off. The only caveat is that text-overflow only works in IE (you may proceed to open IE now) with the ellipsis but you still get the same effect in Mozilla just no ellipsis, and I can live with that. Now this works the same with table cells. See below and note that you must set table to have the table-layout: fixed property for it to work.

.tbl {
	table-layout:fixed;
	border-top: 5px solid #333;
	border-collapse: collapse;
	background: #fff;
	 }
.tbl td {
	border-bottom: 1px dashed #333;
	padding: 2px 5px;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
 } 

The Pioneer Sites of Standards Based Design

Name	Website	Location
Eric Meyer	www.Meyerweb.com	Ohio
L. Jeffrey Zeldman	www.zeldman.com	New York
Doug Bowman	www.StopDesign.com	San Francisco

Overall it is a great property that allows you to skip the step of asking a programming to limit number of characters on a line. If you have a gmail account you can check out how they used it on the inbox and their page is fluid so the overflow grows as you re-size your browser.

A Reader's Toolbox For webmaster, the need of high speed internet broadband increases all the more. As they have to perform seo, and upload javascripts or html templates, that requires a high connection. Especially who offer online certifications like EX0-100 and 640-863 or other kinds of computer software, the installation of wireless networking is a must.