是否可以显示点'...',而不是让文本在div结束后继续?
问题描述:
这是例子:是否可以显示点'...',而不是让文本在div结束后继续?
<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
的高度,然后在最后显示三个点而不是继续下面的点?
答
当您希望在单行结尾处显示省略号时,下面的属性非常有用。
div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
既然你正在寻找多线省略号(这是不是在CSS直接使用),我想下面的链接可以帮助您:
https://codepen.io/martinwolf/pen/qlFdp
还有一个jQuery插件,可它可以使用:
https://tpgblog.com/threedots/
+0
在你的帮助下,我可以解决它的链接信息。 谢谢! – Krestek
你试过这个吗? https://*.com/a/3695438/3377857 –
为了使文本溢出工作,它应用于的元素必须具有设置的宽度/高度,以便它可以检测溢出。此外,该元素的溢出属性应设置为隐藏。 – SidTheBeard
@KlemensMorbe它可以工作,但最终不会显示3个点。不过谢谢,我会用它作为临时解决方案,直到我找到一种方法在最后添加3个点。 – Krestek