1

Quick disclaimer: I saw some plugins that truncate text strings but they do not do it the way I need it...

I need to truncate the text by limiting the space allocated to it. For example, if i have a block of text and it is placed in a div that has dimensions preventing entire text to be shown, I' like to show as much as possible and then append helix at the end of the string.

I think I can use overflow:hidden, but how do I add "..."? Also, is it possible to determine if the text needs more space than the area provide? 

<div style="width: 300px; height: 100px; border: 1px solid #ccc; overflow:hidden">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis risus vel mi placerat ut bibendum dui tempus. In dictum quam eu sem condimentum elementum. Cras id urna eget turpis feugiat porttitor. In hac habitasse platea dictumst. Cras tincidunt risus id sapien sagittis feugiat interdum orci adipiscing. Sed venenatis neque nec nibh mattis laoreet. In ut sapien in felis posuere feugiat. Nulla vulputate, augue nec elementum volutpat, justo nisl vulputate tellus, eget blandit lectus enim at ante. Donec posuere augue a orci sollicitudin ut imperdiet ante varius. 
</div>

DEMO

santa
  • 12,234
  • 49
  • 155
  • 255

3 Answers3

3

It could be quite a bit easier than you think. Here's a little sample on quirksmode on using text-overflow: ellipsis; to truncate text.

According to the page, it works in IE 7 and greater (with some tweaks); it degrades fairly well since it's just clipped in unsupported browsers.

And here's a complete discussion of how to implement for all browsers.

Kato
  • 40,352
  • 6
  • 119
  • 149
  • Wow, perfect! Never heads about this but this is going to make my life a lot easier! Thanks. – santa Nov 08 '11 at 19:36
  • And... since when is IE 6 supporting features not in Firefox?? Sheesh. I think hell may have just frozen over :) – Kato Nov 08 '11 at 19:39
  • +1 nice solution.... I completely forgot about that........ I thought you mean :after......anyway - great solution – Royi Namir Nov 08 '11 at 19:45
  • Hmm, comments indicate that it is not abullet-proof solution either... and I need to truncate after 3 lines, not a single one... Back to the drawing board... – santa Nov 08 '11 at 19:50
  • You can truncate after three lines; it doesn't have to be one; set the height of the div (I think `height: 3em` may do?). – Kato Nov 08 '11 at 21:01
  • Also, does it need to be bullet proof? What are your constraints? Can you set a pixel size on the text? If so, the height/width of the div can be calculated. – Kato Nov 08 '11 at 21:02
2

First here is a post on how to find the width of text in a div: Calculating text width

Once you have this width you could take the percentage of how wide your wrapping div is compared to the text width.

Then you could split your text into an array of chars and take the percentage above and apply it to that array to get your estimated desired text length.

something like this jsfiddle

http://jsfiddle.net/RGybB/

Update to show how percentage is calculated

http://jsfiddle.net/RGybB/2/

Community
  • 1
  • 1
Keith.Abramo
  • 6,952
  • 2
  • 32
  • 46
  • Great stuff. How did you come up with that percentage number? +1 for jsFiddle – santa Nov 08 '11 at 20:00
  • I've added an update to show how to get the percent. I calculate the area of both the div and then the text and take the ratio and apply it to the string as a character array in order to get the percent of that ratio. I then join to put the text back together and inject it into the div as the new text – Keith.Abramo Nov 08 '11 at 20:16
  • Cool. So, if i want to display just 3 lines and then truncate would I take the width of the area multiply by 3, subtract it from the text width and append ellipsis? http://jsfiddle.net/5rhMz/2/ – santa Nov 08 '11 at 20:28
  • Lol, change your sensor selector back to "$("
    ")" instead of "$(".limitbox")" http://jsfiddle.net/RGybB/16/     – Keith.Abramo Nov 08 '11 at 20:57
  • Ohh... cool. Now, why is it calculated as a percentage? Clearly there's some error margin since ... is in the middle of the box. Won't doing it in pixels be a bit more accurate? – santa Nov 08 '11 at 21:05
  • This is not an exact calculation. The code basically says "Take the percentage of textArea showing and remove that percentage of characters from the string. However since character dimensions do not play a role in this calculation it only assumes a best guess. You will have to add/subtract a couple characters if you want it to exactly fix into 3 lines or just play with the div width until you find a width which works. My jsfiddle uses 52px for 3 lines of text with that font. – Keith.Abramo Nov 08 '11 at 21:20
  • OK, I'll play with it, but if I need to adjust where will I fine-tune it? And since we know the length of the container, can't we multiply it by 2, making it the string length? – santa Nov 08 '11 at 21:23
0

you cant do it by css ( unless you want to cut or match and wrap) but you can't add "..." via css only - youll have to do some jQuery + measure the length of the text with the specified font...

Royi Namir
  • 144,742
  • 138
  • 468
  • 792