css text overflow shows ellipsis-Kaiqisan

ヤッハロー, Kaiqisan すうう, 一つふつうの学生プログラマである, today is another day to open a new hole! Let's get some css. This time we will talk about the overflow display ellipsis method. It is very practical in actual situations. So, just write it down today.
The front row reminds me that all my documents are sourced from the network, the result of self-experiment!

It has a set of fixed formulas

Single line overflow

/* 关键代码 */
.demo {
    
    
	width: 400px;
	height: 300px;
    /* height可以没有，但是我建议一定要有width稍微框一下 */
    /* 下面三行是关键 */
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

Next, let's explain the function of each attribute separately!

overflow: Needless to say this, it can hide everything that overflows the current block. The following two properties are based on it.

text-overflow: If the text overflows, you want to display additional text. ellipsis means display ellipsis, fade means no display, in addition, Firefox can also support displaying custom text

text-overflow: 'XXXX' ellipsis;

white-space: Specify how to deal with the blanks in the element, select nowrap to indicate no line break. See the rookie tutorial for details

Multi-line overflow

I want to display an ellipsis on the fifth line after inputting more than five lines.

/* 关键代码 */
.demo {
    
    
	margin: 100px 0 0 50px;
	border: 1px solid #000000;
	width: 400px;
	height: 300px;
	display: -webkit-box;		
	-webkit-box-orient: vertical; /* 如果浏览器内核不是WebKit的话就无法支持该方法 */ 
	-webkit-line-clamp: 3;		/* 希望三行后溢出显示省略号 */ 
	overflow: hidden;
}

Current display

The display effect here is not very satisfactory, the text after the third line is still displayed normally.

Therefore, this method requires us to control the height of the block to achieve the desired effect.

Very good and energetic! ,

PS: The above method can only deal with the current level of text, there is no way for the current deeper content!

<div class="demo">
	<p>ddddddddddddddddddddddddddddddddddddd</p>
</div>
<!-- 如果给了demo样式，但是无法作用于里面的p标签内的内容 -->

to sum up

If css doesn't work, use js! After encapsulating a method by yourself, move it directly and it will be over!