Lastly, you’ll have to add the overflow: hidden CSS rule to make sure all the other lines are not visible.Īnd there you go, now you have uniform elements that are always truncated to the same amount of lines. ![]() At the end of that line, it will then add ellipses to indicate the line clamping. What happens is that CSS will render all the content, but limit it after the specified number of lines (in this case, 3). The requirements for using this line clamping feature are that the line clamped element should have its display property set to either -webkit-box or -webkit-inline-box, and that the -webkit-box-orient property is set to the vertical value. It accepts an integer value and limits the content of the element it’s used on to the specified number of lines. To solve all of these issues, a CSS rule was added to WebKit: -webkit-line-clamp. However, this solution is very coupled to the content’s font properties and makes it extremely inflexible. This solution avoids that CSS rule and, instead, creates a box around the content based on the text’s spacing and line-height. The problem with the single line truncation solution is that it requires text wrapping to stop after one line. On the contrary, putting the content inside a box with specified dimensions is a CSS based solution. Both solutions also require the content to be entirely textual. Counting words is extremely dependent on the language and the length of the words, which can still result in uneven truncation while counting letters can result in broken words for the user. But all of those solutions were clunky, inflexible, and suffered from their own problems.Ĭounting words and letters both require you to make use of JavaScript, which is less optimised for the browser compared to CSS solutions. All of the solutions would revolve around either counting words, counting letters, or putting the content inside a box with certain dimensions. But how can you implement this? Workaround Methodsįor a long time, unfortunately, there was no easy way to implement multiline text truncation. Compared to single-line text truncation, the same reasons to do so also apply but in a slightly different form. In certain scenarios, it’s beneficial for the UI to truncate a text after multiple lines instead of just one. But because their lengths are all different, the UI becomes inconsistent.īut that only works for single-line text truncation. All of these together will make the text truncate after one line and add an ellipsis at the end of the text if the last CSS rule was applied.Ĭommon frontend issue: textual content rendered inside some UI component (card). It requires a set width and using a mix of the overflow: hidden, white-space: nowrap, and text-overflow: ellipsis CSS rules. Most frontend developers will know how to implement text truncation for a single line of text. It could be to save precious screen estate, to make different parts of the UI appear uniform, to put less important information to the user behind a toggle, and the list goes on. ![]() In frontend development, React included, it’s common to have to truncate text that is presented to the user. Multiline Text Truncation With CSS line-clamp
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |