7 replies [Last post]
jereme
Offline
Regular
Last seen: 13 years 23 weeks ago
Joined: 2005-10-04
Posts: 13
Points: 0

Is there any way to add an elipse (...) to the end of any text that overflows?

I have text that I don't want to wrap and don't want to stick out of it's enclosing div. When I have a long string, it's cut off (as expecited Smile); however, I would like a way to add elipse to the display for text items that overflow ie:

string:
This is my long string

overflow cuts it off:
This is my lo

what I want:
This is my...

Been trying to find a way to do this and haven't had any luck so far. Hope someone here knows.

Thanks,
Jereme

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 12 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Adding elipse to overflow text ...

Yes and no. You could use the pseudo-class :after to add the ellipsis to say, a paragraph tag. This will work in Firefox... however, not in Explorer since it doesn't support :after (or :before).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css" media="all">
<!--
p:after
	{
	content: "...";
	}
-->
</style>
</head>

<body>
<p>This is a paragraph</p>
</body>
</html>

The next sentence is true. The previous sentence is false. Discuss...

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 18 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Adding elipse to overflow text ...

co2, I was thinking the same thing but then thought 'no, that would it to the end of the paragraph and be hidden with the rest of the overflow' Plus it wouldn't back up to the last full word.

jereme, I'm guessing this is a dynamic page. You may have to test for string length and shorten as necessary - but then I don't know how you would account for different font sizes...

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 12 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Adding elipse to overflow text ...

wolfcry911 wrote:
co2, I was thinking the same thing but then thought 'no, that would it to the end of the paragraph and be hidden with the rest of the overflow' Plus it wouldn't back up to the last full word.

jereme, I'm guessing this is a dynamic page. You may have to test for string length and shorten as necessary - but then I don't know how you would account for different font sizes...

Good call, and true... yet still entirely academic thanks to IE! Tongue

Yes, seems as a bit of scripting is in order. Laughing out loud

The next sentence is true. The previous sentence is false. Discuss...

Anonymous
Anonymous's picture
Guru

Adding elipse to overflow text ...

This is not an ellipse: ...

but this is: …

Tongue

larmyia
Offline
Elder
London
Last seen: 13 years 42 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Adding elipse to overflow text ...

if we're going to be pedantic...

http://www.punahou.edu/acad/sanders/geometrypages/GP18Ellipse.html wrote:
One description of an ellipse is a squashed, stretched or otherwise distorted circle.

Smile

oh time for bed!

Anonymous
Anonymous's picture
Guru

Adding elipse to overflow text ...

Oops. Ellipsis. Wink

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 12 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Adding elipse to overflow text ...

I too could well have been pedantic but have had issues using the ASCII code for the ellipsis before, hence, I simply stick to three points now...

Laughing out loud

The next sentence is true. The previous sentence is false. Discuss...