How to hide the excess part of text

This time I will show you how to hide the excess part of the text, what are the precautions for hiding the excess part of the text, the following is a practical case, let's take a look.

Hide the part beyond the text, summarize two methods.

1. Single line hiding

html code

<p>当文字超过范围的时候，超出部分会隐藏起来。</p>

css code

.mi {
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
}

2. Multi-line hiding

html code

<p>当文字超过范围的时候，超出部分会隐藏起来。可以设置第几行开始隐藏。</p>

css code

.mi {
    width: 200px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

CSS to implement 3d translucent cube

Two methods to implement progress bar in CSS3

Several ways to implement Footer bottom placement in CSS

The above is the detailed content of How to hide the excess part of text. For more information, please follow other related articles on the PHP Chinese website!