FED实验室 - 专注WEB端开发和用户体验

煦涵说CSS:text-overflow

煦涵说 煦涵 220℃ 0评论

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

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

煦涵说-深入CSS属性系列

前置条件

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

可取值

clip

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

.to-clip {
    text-overflow: clip;
}

ellipsis

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

.to-ellipsis {
    text-overflow: ellipsis;
}

自定义字符串

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

.custom {
    text-overflow: "fedlab";
}

两个属性值

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

.double {
    text-overflow: ellipsis ellipsis;
    /* 两边溢出 */
    text-align: center;
}

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

兼容

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

感谢您的阅读

EOF
作者[煦涵]
2017年07月08日

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持 喜欢 (0)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址