用省略号截断标题旁边的文本答案

【问题标题】：Truncated a text with ellipsis that be next to a title用省略号截断标题旁边的文本
【发布时间】：2014-07-25 14:57:15
【问题描述】：

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

我的标题这是一个很长的文本，我想...

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

【问题讨论】：

尝试将 .shortening 上的样式改为 .title。

标签： css ellipsis

【解决方案1】：

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

如果您还有任何问题，请告诉我。

【讨论】：

谢谢，我以为我尝试了这个解决方案，但实际上没有，因为我得到了不好的结果

【解决方案2】：

您需要在缩短时设置一个宽度，例如 width:200px;没有截断就没有理由截断文本。

【讨论】：

是的，我之前使用这个解决方案来获得 Sander 的解决方案。