截断带有省略号的文本，该省略号位于标题旁边

Question

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

  

我的标题这是一篇很长的文字，我想......

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

我为你做了fiddle。实际上，正如Brian Glaz在评论中所说，将.shortening样式移到.title。另外，我在文本周围添加了一个包装器，以便它知道它可能占用多少宽度。

如果您还有任何疑问，请与我们联系。

Answer 2

你需要设置宽度缩短宽度：200px;没有截断，没有理由截断文本。