User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I'm trying to create a product listing page that includes the description in the listings. However, the page is not uniform and is very long. I've tried several ways of trimming the text, but what is the best practice for this?
I've tried cutting the text off at (x) characters, and also at (x) words, both with an ellipses at the end of the text, but this looked a bit strange; cutting words/sentences in half.
Assuming your product description is in paragraph format, consider copying how blogs cut off blog article into an excerpt or search results.
Figure out how much of the description (approximate character count) needs to be there for the user to get the gist of the product. Then trim forward to the end of the last word within the limit.
Here's an example from Google's search results.
Cutting off a word in half can leave the user guessing at what that last word might be and as you say, make it look strange. So you only do that as a last resort if your text string is very short (e.g. titles).
It’s always better to create a text for this purpose (which I recommend if it involves selling a product). But if that involves too much work and you prefer to do it programmatically, create a script that can cut text off at different levels. It should first look for a paragraph ending, then a sentence, then a part of a sentence, then a word and at last characters.
Let me explain this. Besides the maximum length you should define what the minimum length of the text should be.
Look if you can cut off the text at the end of a paragraph within the minimum and maximum amount of characters.
If 1 is not possible, see if there is a sentence that ends nicely within the min and max amount.
If 2 is not possible either, look for a part of the sentence that can be trimmed. Look for comma’s, colons, semicolons etc.
You can go further by looking for the last word within the minimum and maximum length. (You can even look for a dash if the word fits the minimum but exceeds the max, it can be as precise as you want)
At a last resort just cut off the text at the maximum amount of characters.
In the case of a longer description I would define a minimum that makes it almost impossible to reach step 3. For a shorter description reaching 4 should be fine.
I like the way it is done in WPF. Trim to the size of the box and break on word or character. If you show a boundary (like a border) then it better communicates the text was truncated. When it breaks on character and trims right to the edge I think is more intuitive and makes for the best use of space. A partial word is more information than no word.
Use CSS "text-overflow:ellipses" to truncate long texts ... you can find the solution here: https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
