In some paragraphs, the page requires that the text be displayed in only one line, but with a fixed width. When the text is too long, a requirement arises to hide the text that exceeds the length limit and display an ellipsis. CSS supports this property.
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 commonly used layout method in front-end development, which is simple, convenient, and effective. However, text overflow hidden cannot be used in elements with flex layout. In other words, these two cannot appear in the same tag at the same time.
Here, we also have a corresponding solution.
Just make sure that flex layout and the hidden style are not in the same level element, so wrap the text with an additional outer tag.
You can use the following code:
<p>
<!-- We apply flex layout to this outer tag -->
<span> <!-- We apply the style for hiding long text to this inner tag -->
<!-- Text -->
</span>
</p>