Managing Long Content with CSS

When creating a layout in CSS, it is essential to consider the length of text content. If a word is added or removed in the text, many situations will cause the design to change. I will discuss the methods used to manage different text lengths in this article. Techniques may vary depending on the purpose of the page.

Overflow-wrap

If the size of the content is larger than the container’s area, it is not divided into the bottom line by default and overflows beyond its container. One of the ways we can use to avoid this issue is overflow-wrap. By default, it will take overflow-wrap: normal;. We must set this value to overflow-wrap:break-word; to enable long content to move to a subline when there is not enough space left. With the CSS code below, we can get any we want.

.element {
overflow-wrap: break-word;
}

Hyphens

When words do not fit in the line, they are divided by the browser according to the language specified in HTML. The following CSS code allows us to cross a subline with hyphens.

.element {
hyphens: auto;
}

Text Truncation

It’s a method we can use when we want our content to be one line. At the end of the container area, it truncates the content by placing three points. That way, we can also indicate that there is more to the content. There is no custom CSS attribute, but several CSS properties combine to help us create the image we want.

.element{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Line-clamp

We may ask that our content truncates after a specific line. In such cases, the developer can use the line-clamp feature. Following the number specified in this feature, the content is truncated. display: - webkit-box; must be used for this method to work. Another important thing is to use the element padding property. Padding is detected as an empty line, and the content appears in more rows than we set. Below is the difference between CSS line-clamp code and padding applied and non-padding applied.

.element {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}