截断标题旁边带有省略号的文本

Question

我希望在标题旁边有一个摘要，如果摘要太长，我希望它被截断为经典的省略号，像这样:

My Title这是一个很长的文本，我想…

我不想定义摘要的宽度，我希望它占用同一行的所有空间。我试图使用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;
}

Answer 1

我为你做了一把小提琴。的确，正如Brian Glaz在评论中所说，将.shortening样式移动到.title。此外，我在文本周围添加了一个包装器，这样它就知道它可能占用多少宽度。

如果您还有什么问题，请告诉我。

Answer 2

你需要为缩短设置一个宽度，比如width:200px;如果没有截断符，就没有理由截断文本。