首页

Appearance

文字过长时显示省略号 ​

单行省略号 ​

用法:为已有宽度的盒子添加属性。

属性取值解释
white-spacenowrap让文字在一行内显示, 不换行
overflowhidden当内容超过盒子宽度, 隐藏溢出部分
text-overflowellipsis如果溢出的内容是文字, 就用省略号代替

示例

文字过长时显示省略号

示例代码

html
<style>
  .wrapper {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<div class="wrapper">文字过长时显示省略号</div>

注意

1、需要设置固定的宽度。

css
.wrapper {
  width: 100px; 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2、如果不是块级元素的话，需要通过 display 属性进行设置。

html
<style>
  .wrapper {
    display: inline-block; 
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>


<div class="wrapper">文字过长时显示省略号</div>
<span class="wrapper">文字过长时显示省略号</span>

多行省略号 ​

多行省略号只能支持 webkit 内核浏览器, IE 系就不兼容。

属性取值解释
overflowhidden当内容超过盒子宽度, 隐藏溢出部分
text-overflowellipsis如果溢出的内容是文字, 就用省略号代替
-webkit-line-clamp2控制可以显示的行数
display-webkit-boxFlexbox 的向下支持
-webkit-box-orientverticalbox-orient

示例

多行文字过长时显示省略号

示例代码

html
<style>
  .wrapper {
    width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
</style>

<span class="wrapper">多行文字过长时显示省略号</span>

提示

可以修改-webkit-line-clamp 的值实现多行省略号。

多行文字过长时显示省略号

css
.wrapper {
  width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; 
  -webkit-box-orient: vertical;
}