html – 如何在达到容器的最大空间时显示省略号

概述我知道如何在我只想显示一行文本时使用文本溢出省略号.像这样 我只是用它 <div style="height: 36px;overflow: hidden;text-overflow: ellipsis; white-space: nowrap; width: 246px;"><a>Kesong Xie: </a><span class="">This place i hav 我知道如何在我只想显示一行文本时使用文本溢出省略号.像这样

我只是用它

<div ><a>Kesong XIE: </a><span >This place i have been to before,and it has a nice sunset and a beautiful beach :)</span></div>

但是,当文本到达第一行的末尾时,文本会被截断,而外部容器仍然有足够的空间,我想要的是这样的：

有可能这样做吗？

解决方法 你可以在:: after伪元素中使用一些技巧

.clip-text{    position: relative;}.clip-text::after{    position:absolute;    right:-1px;    bottom:0;    content:"..."}

<div  ><a>Kesong XIE: </a><span >This place i have been to before,and it has a nice sunset and a beautiful beach :)</span></div>

总结

以上是内存溢出为你收集整理的html – 如何在达到容器的最大空间时显示省略号全部内容，希望文章能够帮你解决html – 如何在达到容器的最大空间时显示省略号所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。