目录

  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

转载申请

本作品采用知识共享署名 4.0 国际许可协议进行许可，转载时请注明原文链接，文章内图片请保留全部内容。