目录

  1. 前置条件
  2. 可取值
    1. clip
    2. ellipsis
  3. 自定义字符串
  4. 两个属性值
  5. 兼容

text-overflow 属性常用来处理文本溢出时剪切文本,常用的取值有 clip 、ellipsis 、inherit; 常见的文本溢出处理 CSS:

1
2
3
4
5
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

前置条件

  1. 该元素必须为 display:block 或者 display:inline-block 元素,需要设置宽度来控制文本被溢出。
  2. 该元素必须设置 overflow: hidden | scroll | auto
  3. 文本溢出方向依赖 direction: rtl | ltr 属性。
  4. 整行溢出依赖 white-space: nowrap 属性。

可取值

clip

默认值,设置该值时文本会被裁切。

1
2
3
.to-clip {
text-overflow: clip;
}

ellipsis

设置改属性文本溢出时会显示省略号。

1
2
3
.to-ellipsis {
text-overflow: ellipsis;
}

自定义字符串

可以给text-overflow 设置溢出自定义字符串,现在只有 Firefox 浏览器支持

1
2
3
.custom {
text-overflow: "fedlab";
}

两个属性值

两个属性值语法,左右方向溢出,设置 text-align: center, 显示中间部分文本,现在只有Firefox支持。

1
2
3
4
5
.double {
text-overflow: ellipsis ellipsis;
/* 两边溢出 */
text-align: center;
}

PS:自定字符串及两个属性值情况,都有被遗弃的风险,在生产环境中慎用,目前只在 firefox 中支持。

兼容

  • IE8/9浏览器 input[type=text] 元素上无效
  • Chrome/IE 浏览器 select 元素上无效
  • Opera 浏览器加前缀兼容 -o-text-overflow