Question

这是一个例子：

<style>
    div {
        background-color: skyblue;
        height: 100px;
    }

    .posttext {
        word-wrap: break-word;
        -ms-hyphenate-limit-lines: 10;
        text-overflow: ellipsis;
    }
</style>
<div>
    <p class="posttext">---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8--------</p>
</div>

当您减少浏览器的宽度时，文字将继续显示在蓝色div下。我找到了一种使用'text-overflow: ellipsis'停止它的方法，但它在第一行停止。它是否有可能继续直到达到div的高度，然后在结束处显示三个点而不是在它下面继续？

Answer 1

如果要在单行末尾显示省略号，则下面的属性非常有用。

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

由于您正在寻找多行省略号（CSS中不能直接使用），我认为以下链接可能会对您有所帮助：
https://codepen.io/martinwolf/pen/qlFdp

还有一个可用的Jquery插件：
https://tpgblog.com/threedots/

是否有可能显示点＆＃39; ...＆＃39;而不是在div结束后让文本继续？

1 个答案: