网站页面创意商城县建设局网站
显示省略号的前提：必须有指定宽度
一、单行文本超出部分显示省略号
| 属性 | 取值 | 解释 |
|---|---|---|
| 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;
}说明：
-webkit-line-clamp 可以把块容器中的内容限制为指定的行数，它只有在 display设成 -webkit-box 或 -webkit-inline-box 并且 -webkit-box-orient设成 vertical 时才有效果。