Text-overflow: ellipsis. In human language: gracefully cut off any text and replace it with ‘…’ when there’s no more space left for text. An absolutely beautiful CSS property, don’t you think? Think again. This only works on the first and only line of text within a text block. It removes everything after that. Not Cool, CSS! But not to worry. Today I will show you a clean and simple alternative to line clamping using PHP.
Line Clamping Alternatives
At first you could think it’s weird to let lay-out related issues be handled server-side. Using a JavaScript-alternative is also a perfectly valid way to achieve the perfect text-overflow for your content. There’s no way of dismissing that.
Some claim to have found pure CSS solutions for truncating multiple lines of text. I can’t recommend them to anyone, because they are more tricks than they are solutions. They’re not clean solutions and usually have some downsides to them.
I prefer handling it server-side, though, because it usually means less data for the user to download and faster page-load times. Besides, as a WordPress-developer, I don’t have to use this script, because the_excerpt(). Consider this a clean PHP alternative to line clamping, where text-overflow: ellipsis leaves us grasping in the dark.
Text-Overflow: Ellipsis with PHP
Now, for the magic.
| <?php | |
| $text = 'your text'; // or $yourtext; | |
| $maxPos = 50; // Max. number of characters | |
| if (strlen($text) > $maxPos) | |
| { | |
| $lastPos = ($maxPos - 3) - strlen($text); | |
| $text = substr($text, 0, strrpos($text, ' ', $lastPos)) . '...'; | |
| } | |
| echo $text; |
Here’s how it works
The script takes your text (or variable containing your text) and compares it against the given $maxPos (maximum position). When the given string ($text) is longer than $maxPos it generates a new variable ($lastPos) truncate the text and make space for the ellipsis. Then it overwrites the $text with a new string, where it looks for the last occurence of ‘ ‘ (space) within $text and replaces it with ellipsis…
Again, I prefer this method to any other alternative, because it’s clean, fast and it actually truncates your text. Because it searches for spaces (as opposed to e.g. simple string length) it always cuts off a string at the end of a word. Which makes it a very elegant solution for line clamping. The best alternative for thos who would want to use text-overflow: ellipsis on multiple lines of text.
