我想在标题旁边有一个摘要，如果摘要太长，我希望将其截断为经典省略号，如下所示：
我的头衔这是我想要的很长的文字...
我不想定义摘要的宽度，我希望它占用同一行中的所有空间。我尝试使用overflow: hidden，text-overflow: ellipsis但无法将截断的文本放在标题旁边。如果标题旁边是文本，则摘要不会被截断；如果文本被截断，则它不在标题旁边。
这些是我的一些尝试：
<h2 class="title">
My Title
<span class="tiny shortening">This is a very long text that I want to shorten This is a very long text that I want to shorten This is a very long text that I want to shorten This is a very long text that I want to shorten shorten</span>
</h2>
<h2>
My Title
<div class="tiny shortening">This is a very long text that I want to shorten This is a very long text that I want to shorten This is a very long text that I want to shorten This is a very long text that I want to shorten </div>
</h2>
与CSS
.title {
white-space: nowrap;
}
.inline {
display: inline;
}
.tiny {
font-size: 70%;
}
.shortening {
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
我为你做了个小提琴。确实，正如Brian Glaz在评论中所说，将.shortening样式移至.title。另外，我在文本周围添加了一个包装器，以便它知道它可能占用多少宽度。
如果您还有任何疑问，请告诉我。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句