CSS多余文字显示省略号是Web开发中一个常见的问题，它可以通过CSS的text-overflow属性来实现，本文将从多个方面对CSS多余文字显示省略号做详细的阐述。
一、CSS多余文字不显示省略号
当文本内容超出容器的宽度时，如果不设置text-overflow属性，文本会自动变为换行显示，而不会显示省略号。例如：
.container{
width: 200px;
height: 50px;
overflow: hidden;
border: 1px solid #ccc;
}
.text{
width: 300px;
height: 100px;
font-size: 16px;
line-height: 1.5;
}
这时在HTML中添加如下代码：
如果文本内容超出容器的宽度时，如果不设置text-overflow属性，文本会自动变为换行显示，而不会显示省略号。
结果如下：
二、CSS多余文字显示省略号和展开显示
有时我们需要文本过长时既显示省略号，又能点击展开全文，这时候可以通过添加伪类和JavaScript来实现。例如：
.container{
width: 200px;
overflow: hidden;
position: relative;
}
.text{
width: 300px;
height: 100px;
font-size: 16px;
line-height: 1.5;
}
.text::after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-right: 20px;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
.btn{
position: absolute;
bottom: 0;
right: 0;
padding: 0 10px;
font-size: 14px;
color: #f00;
background: #fff;
cursor: pointer;
}
这时在HTML中添加如下代码：
有时我们需要文本过长时既显示省略号，又能点击展开全文，这时候可以通过添加伪类和JavaScript来实现。展开全文
结果如下：
三、CSS多余文字显示省略号六个点
除了三个点的省略号，还可以使用六个点的省略号，只需要设置text-overflow为ellipsis和2个unicode字符即可。例如：
.container{
width: 200px;
height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
这时在HTML中添加如下代码：
如果文本内容超出容器的宽度时，6个点的省略号有时更加美观
结果如下：
四、CSS文字溢出显示省略号
有时我们需要将一些特定字符之后的文本显示省略号，这时候可以使用CSS的::first-line和::after相结合的伪类来实现。例如：
.container{
width: 200px;
overflow: hidden;
}
.text::first-line{
font-weight: bold;
}
.text::after{
content: "...";
font-weight: normal;
}
.text.overflow{
white-space: nowrap;
text-overflow: ellipsis;
}
这时在HTML中添加如下代码：
前缀：CSS多余文字显示省略号后面几个字删掉前缀：CSS多余文字显示省略号后面几个字删掉
结果如下：
五、CSS文字不显示省略号
有时我们需要将一些特定字符之后的文本不显示省略号，这时候可以使用white-space和overflow属性来实现。例如：
.container{
width: 200px;
overflow: hidden;
white-space: nowrap;
}
.text{
width: 300px;
height: 100px;
font-size: 16px;
line-height: 1.5;
}
这时在HTML中添加如下代码：
前缀：CSS多余文字不显示省略号并且不换行显示
结果如下：
六、CSS超出文字显示省略号
有时我们需要将容器宽度固定，但文字长度随内容变化，这时候可以使用inline-block和text-overflow来实现。例如：
.container{
width: 200px;
height: 50px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: 1px solid #ccc;
}
.text{
display: inline-block;
vertical-align: bottom;
font-size: 16px;
line-height: 1.5;
}
这时在HTML中添加如下代码：
CSS超出文字显示省略号
结果如下：
七、CSS溢出文字显示省略号
有时我们需要将容器高度固定，但文字长度随内容变化，这时候可以使用两个容器和text-overflow来实现。例如：
.container{
width: 200px;
height: 50px;
overflow: hidden;
border: 1px solid #ccc;
}
.text{
width: 300px;
font-size: 16px;
line-height: 1.5;
}
.overflow{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
overflow: hidden;
}
.overflow::after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-right: 20px;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
这时在HTML中添加如下代码：
CSS溢出文字显示省略号：有时候我们需要将容器高度固定，但文字长度随内容变化
结果如下：
八、CSS多行文字显示省略号
有时我们需要将多行文字显示省略号，这时候可以使用WebKit和CSS的-webkit-line-clamp属性来实现。例如：
.container{
width: 200px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.text{
width: 300px;
height: 100px;
font-size: 16px;
line-height: 1.5;
}
这时在HTML中添加如下代码：
CSS多行文字显示省略号：有时候我们需要将多行文字显示省略号，这时候可以使用WebKit和CSS的-webkit-line-clamp属性来实现。
结果如下：
九、CSS微信文字显示省略号和展开
微信中文字显示省略号和展开比较特殊，需要在末尾添加一个类似于“阅读全文”的链接。例如：
.container{
width: 200px;
overflow: hidden;
position: relative;
}
.text{
width: 300px;
height: 100px;
font-size: 16px;
line-height: 1.5;
}
.arrow{
position: absolute;
bottom: 0;
right: 0;
padding: 0 10px;
font-size: 14px;
color: #f00;
background: #fff;
cursor: pointer;
}
这时在HTML中添加如下代码：
CSS微信文字显示省略号和展开：微信中文字显示省略号和展开比较特殊，需要在末尾添加一个类似于“阅读全文”的链接。阅读全文
结果如下：
十、CSS表格怎么设置文字显示省略号
在表格中，如果某一单元格的文本内容过长，可以使用CSS的text-overflow属性来实现。例如：
.table{
border-collapse: collapse;
width: 100%;
}
.table td{
border: 1px solid #ccc;
padding: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
这时在HTML中添加如下代码：
一段过长的文本内容一段过
|
