显示省略号的前提：必须有指定宽度
一、单行文本超出部分显示省略号
| 属性 | 取值 | 解释 |
|---|---|---|
| overflow | hidden | 当内容超过盒子宽度, 隐藏溢出部分 |
| white-space | nowrap | 让文字在一行内显示, 不换行 |
| text-overflow | ellipsis | 如果溢出的内容是文字, 就用省略号代替 |
.one-line{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}二、多行文本超出部分显示省略号
| 属性 | 取值 | 解释 |
|---|---|---|
| overflow | hidden | 当内容超过盒子宽度, 隐藏溢出部分 |
| text-overflow | ellipsis | 如果溢出的内容是文字, 就用省略号代替 |
| display | -webkit-box | 必须设置盒子属性为-webkit-box |
| -webkit-line-clamp | 2、3、4… | 设置超出几行后，超出部分显示省略号 注：这是一个不规范的属性（unsupported WebKit property） |
| -webkit-box-orient | vertical | 盒子实现多行显示的必要条件，文字垂直展示 |
| word-break | break-all | 单词破坏：主要用于破坏英文单词的整体性，即在英文单词还没有在一行完全展示时就换行。 简单的理解就是一个单词可能会被分成两行展示 |
.two-line{
overflow:hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
word-break: break-all;
}说明：文章来源：https://www.toymoban.com/news/detail-638071.html
-webkit-line-clamp 可以把块容器中的内容限制为指定的行数，它只有在 display设成 -webkit-box 或 -webkit-inline-box 并且 -webkit-box-orient设成 vertical 时才有效果。文章来源地址https://www.toymoban.com/news/detail-638071.html
到了这里，关于【css】超过文本显示省略号的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
