Truncating Text Using CSS

The Problem

You have an area of text that needs to automatically truncate to fit the space.

Solution #1: Single Line Text

p {
max-width: 150px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

Solution #2: Multiple Lines of Text

p {
line-height: 2rem;
max-height: 8rem;
-webkit-box-orient: vertical;
display: block;
display: -webkit-box;
overflow: hidden !important;
text-overflow: ellipsis;
-webkit-line-clamp: 4;
}

Leave a Reply

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