开发者社区> 问答> 正文

多行文本的情况下,用省略号“...”隐藏超出范围的文本

在单行文本的情况下,可以用来使超出范围的文本用省略号隐藏:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
但是当遇到多行的文本,固定了高度的情况下,这又该如何写呢?
像下面这个文本一样,结尾是 "..."

Over the past day or so the vituperation
against the iOS 6 Maps app, AKA the Maps
app that makes you wish you were ...

展开
收起
a123456678 2016-03-24 16:24:03 1883 0
1 条回答
写回答
取消 提交回答
  • Webkit支持一个名为-webkit-line-clamp的属性,他其实是一个WebKit-Specific Unsupported Property

    p {
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    p {
        overflow: hidden;
        white-space: normal;
        height: 3em;
        text-overflow: -o-ellipsis-lastline;
    }
    2019-07-17 19:13:01
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载