css方式实现文本溢出显示省略号（单行和多行）

一、单行文本溢出显示三个圆点:

基本原理：让文本先溢出，然后隐藏超出的文本，最后更改溢出的样式。

步骤如下:

1)必须有宽度

2)让文本不折行

3)让超出的文本隐藏

4)超出的文本显示成三个原点

方法一:直接在要显示省略号的地方加入以下代码

div{

/* 1)有宽度 */

width: 300px;

border: 2px solid gray;

/* 2)让文本不折行 */

white-space:nowrap;

/* 3)让超出的文本隐藏 */

overflow: hidden;

/* 4)超出的文本显示成三个圆点 */

text-overflow: ellipsis;

}

方法二:使用伪类选择器，来实现上述效果

div{

width: 300px;

border: 1px solid gray;

white-space: nowrap;

}

div::after{

content: '...';

}

二、多行文本溢出显示三个圆点:

基本原理：使用伸缩盒子样式来实现

div{
	width: 300px;
   	/* 切记,设置多行文本溢出显示三个原点的时候不要设置高度 */
     	
   	/* 1)给元素添加对应的伸缩盒子样式 */
    display: -webkit-box;
    
    /* 2)让元素里面的文本纵向排列,垂直显示,垂直排列 */
   	-webkit-box-orient: vertical;
   	
    /* 3)让你的文本溢出的省略号在第几行显示 */
    /* 省略号显示在第三行 */
    -webkit-line-clamp: 3;
    
 	/* 4)让超出的文本省略掉 */
 	overflow: hidden;
}