CSS控制文字超出部分显示省略号

1.单行文本
使用text-overflow：ellipsis属性
text-overflow: clip|ellipsis|string;
clip：修剪文本。
ellipsis：显示省略符号来代表被修剪的文本。
string：使用给定的字符串来代表被修剪的文本。

示例：
p{
overflow: hidden;/超出部分隐藏/
text-overflow:ellipsis;/* 超出部分显示省略号 /
white-space: nowrap;/规定段落中的文本不进行换行 /
width: 250px;/需要配合宽度来使用*/
border: 1px solid red;
font-size: 30px;
}

单行文本超出部分显示省略号我是texttext 测试测试测试

image.png

2.多行文本显示省略号，省略号后面一行
p{　
　　display: -webkit-box;
　　-webkit-box-orient: vertical;
　　-webkit-line-clamp: 3; //表示几行开始省略 可以改为2
　　overflow: hidden;
　　width: 250px;
　　border: 1px solid red;
　　font-size: 30px;　
}

image.png