是否可以显示点'...'，而不是让文本在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直接使用），我想下面的链接可以帮助您：
https://codepen.io/martinwolf/pen/qlFdp

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