Line Clamping: A Clean CSS Text-Overflow Alternative with PHP

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

A clean PHP Alternative to CSS and JS Line Clamping and Text-overflow Ellipsis
An example of this PHP Alternative to Line Clamping / Text-overflow

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.

❤️ it? Share it!

About The Author

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Shopping Cart
  • Your cart is empty.