Skip to content

Instantly share code, notes, and snippets.

@geon

geon/ellipsis.htm

Created November 20, 2010 21:07
Show Gist options
  • Save geon/708155 to your computer and use it in GitHub Desktop.
Save geon/708155 to your computer and use it in GitHub Desktop.
Download ZIP
Textshortening and ellipsis with only CSS
Raw
ellipsis.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Textshortening and ellipsis with only CSS</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
p {
width: 220px;
line-height: 18px;
height: 18px;
overflow: hidden;
}
p span.shorten{
display: block;
height: auto;
padding-right: 20px;
/*
NOTE: The image is supposed to contain a number of "rows"
stacked on top of each other. All but the last would
contain an ellipsis. The row height must match the height
of the parent element, in this case 18 pixels.
Like this:
+---+
|...|
|...|
|...|
|...|
|...|
|...|
|...|
| | - No ellipsis on the last row.
+---+
*/
background: url(ellipsis.gif) no-repeat right bottom;
}
</style>
</head>
<body>
<p><span class="shorten">This text is shortened to fit in a limited space.</span></p>
<p><span class="shorten">The technique used is very handy, since it won't cut your words in half randomly.</span></p>
<p><span class="shorten">It also doesn't need any scripting, server or client-side.</span></p>
<p><span class="shorten">Short line.</span></p>
</body>
</html>
@geon
Copy link
Author

geon commented Nov 20, 2010

Found a better solution:
http://stackoverflow.com/questions/2108740/how-do-i-indicate-long-text-into-a-smaller-fixed-column-with-css/2109035#2109035

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment