是否可以显示点“...”而不是让文本在 div 结束后继续？

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 中不能直接使用），我认为下面的 link 可能对您有所帮助：
https://codepen.io/martinwolf/pen/qlFdp

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

是否可以显示点“...”而不是让文本在 div 结束后继续？

Is it possible to show dots '...' instead of letting text continue after the end of div?

html

css

layout

text

overflow