Truncating long strings with ellipsis via PHP or CSS in Firefox

Question

Possible Duplicate:
text-overflow:ellipsis in Firefox 4?

I have the same issue mentioned in Truncating long strings with CSS: feasible yet?. It's been nearly two years since that post, and Firefox still ignores the text-overflow: ellipsis; property.

My current solution is to truncate long strings in PHP like so:

if(strlen($some_string) > 30)
    $some_string = substr($some_string,0,30)."...";

That more or less works, but it doesn't look as nice or as accurate as text-overflow: ellipsis; in browsers that support it. The actual width of thirty characters varies since I'm not using a monospace font. The XML fix and jQuery plugins posted in the other thread appear to no longer work in Firefox either.

Is there currently a way to do this in CSS that is browser independent? If not, is there a way to measure the width of a string given a font and font size in PHP so that I might more accurately place my ellipsis?

Possible dupe: http://stackoverflow.com/questions/4927257/text-overflowellipsis-in-firefox-4 — Myles Gray, Mar 18 '11 at 22:37

score 1 · Answer 1 · edited May 23 '17 at 12:11

1

This answer might be useful for getting your output truncated to the nearest word, and then simply append a … (…) HTML entity onto the end of the output to get your final output.

As you've noticed there's not sufficiently wide browser support yet the CSS solution yet, and you've still got to worry about old browsers too.

edited May 23 '17 at 12:11

Community

1
1

answered Mar 18 '11 at 22:43

GordonM

31,179
15
87
129

Gavin Anderegg · Answer 2 · 2011-03-18T23:31:08.717

It is a shame that all browsers don't handle the same CSS features. However, you could always do something like this using JavaScript (with help from jQuery).

Here's an example of how such a thing might look: http://jsfiddle.net/VFucm/

The basic idea is to turn your string into an array of words, like so:

var words = full.split(/\s+/g);

Loop through them and take the first N (in this case I chose 24) and push them into another array:

for (var i = 0; i < 24; i++) {
    short.push(words[i]);
}

Throw them back into the HTML element they came from:

$('.snip').html(short.join(" ") + ' <span class="expand">...</span>');

... here I added a "link" to expand the shortend text. It's made to look and act like a link using CSS. I also provided a function to replace the shortened text with the foll text again:

$('.expand').click(function() {
    $('.snip').html(full);
});

I did this very thing in some code I have, but I found that if you insert this automatically in the middle of an LI in a UL, for instance on output from a richtext editor, it will only hide the end of the LI item in question, rather than the end of that LI item as well as the rest of the text. So, note it can't work in that situation. — Volomike, Jan 21 '12 at 09:10

Truncating long strings with ellipsis via PHP or CSS in Firefox

2 Answers2