开发者社区 问答 正文

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

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

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 1984 分享 版权
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
    赞同 展开评论
问答分类:
问答地址: