CSS文本溢出处理方式

Frank
  • 开发笔记
  • CSS
小于 1 分钟约 196 字...

单行文本溢出省略号效果

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

指定 N 行文字溢出省略号效果(以 4 行为例)

因使用了 WebKit 的 CSS 扩展属性,适用于 WebKit 浏览器及移动端

ellipsis_four {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

提示

-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的 WebKit 属性。

常见结合属性:

display: -webkit-box 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示

-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式

上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1