### 回答1：
当
文本在容器中超出一定的
行数时，我们通常需要将多余部分省略
显示。
CSS提供了text-overflow属性来实现这一功能。
在使用text-overflow属性时，我们需要注意以下几点：
1
.需要先设置容器的宽度和高度，并且要加上overflow:hidden，这样才能实现多余
文本的省略。
2
.在容器中使用white-space:nowrap，可以禁止
文本换
行。
3.在
文本的容器上设置text-overflow:ellipsis，表示多余
文本使用省略号来
显示。
当然，还需要在
文本容器中加入两个属性，一个是display:inline-block，这样可以让其容纳
多行文本。另一个则是-webkit-line-clamp:
3（其中
3指的是
文本行数），这个属性仅适用于WebKit（Safari和Chrome）浏览器，可以限制
文本的
行数，同时保证省略号的
显示。
最终的
CSS样式如下：
```
.text-container{
width:
300px;
height: 90px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: -webkit-box;
-webkit-line-clamp:
3;
-webkit-box-orient: vertical;
}
```
这样设置以后，
文本在容器中
超过三
行时，多余的
文本就会用省略号来
显示了。
### 回答2：
在网页设计中，经常会出现
文本内容过多的情况，此时如果出现
文本溢出的情况，会影响网页的美观度和用户阅读体验，因此需要使用
css多行文本溢出省略号的技巧来优化页面。
具体实现方法如下：
1
. 首先，在
css中设置
文本框的宽度和高度，以及
文字大小和字体，如下代码所示：
```
div{
width: 200px;
height: 100px;
font-size: 16px;
font-family: &#
39;微软雅黑&#
39;;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:
3;
-webkit-box-orient: vertical;
}
```
解析：
（1）设置div的宽度和高度，限定
文本框大小；
（2）设置
文字大小和字体，以达到最佳观感效果；
（
3）设置"overflow: hidden"，告诉浏览器如果
文本内容
超过文本框大小则
隐藏溢出内容；
（4）设置"text-overflow: ellipsis"，表示当
文本溢出时以省略号代替
溢出的内容，并提示用户可以通过鼠标悬停
显示全部内容；
(5
) 设置"display: -webkit-box"， 使用弹性布局模型；
(6
) 设置"-webkit-line-clamp"，规定
文本最多
显示的
行数；
(7
)设置"-webkit-box-orient"，规定正文框的子元素的排列方式。
2
. 在html中编写
多行文本，如下代码所示：
```
<div>
这里是一段
多行文本内容，假设这里面有很多很多的
文字，而且他们都是非常有价值优美的句子。
如果
文本内容
超过了这个
文本框的大小，那么省略号就会出现在末尾，告诉用户还有内容。
</div>
```
解析：
给html中需要
多行文本溢出省略号的内容加上相应的类名，这里是写的div。
通过上面的代码实现，就可以让网页上的
文本内容过多时自动省略多余部分，并以省略号代替。同时，用户可以通过悬停鼠标来查看完整的
文本内容，从而提升用户体验。
需要注意的是，在使用上述的技巧时，应该根据具体情况设置适当的宽度、高度、段落数目和字体大小等参数，以达到最佳的视觉和用户体验效果。
### 回答
3：
CSS中通过`text-overflow`属性来实现
多行文本省略号。通常情况下，该属性只在一
行文本超出元素宽度时才会生效，如果需要实现
多行文本省略号，则需要结合使用其他
CSS属性。
首先，需要将
文本限制在容器中，可以通过设置`overflow: hidden`和`white-space: nowrap`来实现单
行文本的限制。这样可以保证
文本不会自动换
行，并且超出容器宽度时会被
隐藏。
接下来，需要通过添加伪元素`::after`来实现省略号。通过设置`content: "
...";`来添加三个连续的省略号。然后，通过设置伪元素的位置和尺寸，将省略号放置在最后一
行文本的末尾。
最后，需要结合使用
CSS3的`display: -webkit-box`和`-webkit-line-clamp`属性来
控制多行文本的
显示行数。设置`display: -webkit-box`可以将
文本以块级元素的形式进
行排列，从而实现
多行文本的
显示。而`-webkit-line-clamp`则可以设置
文本的
行数，超出部分会被省略号替代。
例如，以下代码可以实现
多行文本省略号：
```
.container {
width:
320px;
overflow: hidden;
white-space: nowrap;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:
3; /* 设置
文本最多
显示3行 */
}
.container::after {
content: "
...";
position: absolute;
right: 0;
bottom: 0;
padding-left:
30px; /* 省略号的宽度 */
background-color: white; /* 与容器相同背景色 */
}
```
需要注意的是，以上代码是基于WebKit内核的浏览器实现的，如果想要在其他浏览器中生效，则需要添加相应的前缀，并且可能需要进
行一些调整。
本文介绍如何使用CSS实现单行或多行文本溢出时显示省略号，包括white-space、text-overflow和overflow属性的使用，以及针对多行文本溢出的-webkit-line-clamp属性。
扫一扫
398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
