In some paragraphs, the page requires that text be displayed on only one line, but with a fixed width. When the text is too long, there is a need for the text exceeding the length limit to be hidden and display ellipsis, which CSS supports.
Single Line Text Overflow Hidden
div{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Multi-line Text Overflow Hidden
div {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
With just a few lines of code, we can achieve our requirements.
However, there is one thing we need to pay attention to!!
Flex layout is a layout method commonly used by front-end developers, which is simple, convenient, and effective. However, in elements using flex layout, text overflow hidden cannot be used at the same time, meaning both cannot appear in the same tag.
Here, we also have a corresponding solution.
Just ensure that flex layout and the hidden style are not in the same level of elements, so wrap an additional layer of tags around the text.
You can use the following code snippet:
<p>
<!-- We apply flex layout to this layer of tags -->
<span> <!-- We introduce the style for hiding long texts in this layer of tags -->
<!-- Text -->
</span>
</p>