Truncates text that is longer than one line, adding an ellipsis at the end (…
).
overflow: hidden
to prevent the text from overflowing its dimensions.white-space: nowrap
to prevent the text from exceeding one line in height.text-overflow: ellipsis
to make it so that if the text exceeds its dimensions, it will end with an ellipsis.width
for the element to know when to display an ellipsis.If I exceed one line's width, I will be truncated.
<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>
.truncate-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200px;
}
CSS, Layout
Truncates text that is longer than one line.
CSS, Layout
Aligns items horizontally using display: inline-block
to create a 3-tile layout.
CSS, Layout
Limit multiline text to a given number of lines.