多个元素和 CSS 文本溢出/省略号 [重复]

Posted 2023-05-07

【中文标题】多个元素和 CSS 文本溢出/省略号 [重复]

【英文标题】：Multiple Elements and CSS text overflow / ellipsis [duplicate]

【发布时间】：2019-04-06 07:19:39

【问题描述】：

假设如下：

<li>
   <strong>Name:</strong>
   <span>John Doe</span>
</li>

标签部分（<strong> 标签中的字符串）和值部分（<span> 标签中的字符串）可以有任意长度。因此，有时标签可能很长，而值可能很短，反之亦然，或两者都短，或两者都长。

当标签和值的组合宽度超过指定宽度时，我希望连接字符串的尾部显示省略号。 如何在 CSS 中做到这一点？

更新：如果标记看起来像这样呢？

<dl>
   <dd>Name:</dd>
   <dt>John Doe</dt>
</dl>

【问题讨论】：

第一个将按原样使用，例如li white-space: nowrap; width: 150px; overflow: hidden; text-overflow: ellipsis; 因为<strong> 和<span> 都是display: inline。第二个需要定位dl dt，因为它是display: block。

如您所见，显示类型也很重要，要使text-overflow: ellipsis; 正常工作，该元素应该是 block 类型（例如“inline-block”、“block ", "flex"，虽然 flex 有更多需要注意的地方）。

【参考方案1】：

只需将text-overflow: ellipsis 设置在包含<li> 上 元素。

li 
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;

<ul>
  <li>
     <strong>Name:</strong>
     <span>John Doe John Doe John Doe John Doe John Doe John Doe John Doe John Doe John Doe John Doe John Doe</span>
  </li>

  <li>
     <strong>Very long long long long long long long long long long long long Name:</strong>
     <span>John Doe</span>
  </li>
</ul>

使用定义列表时，您可以将 <dt> 和 <dd> 元素包含在 <div> 中（这是自 html5 以来的规范中的 explicitly allowed，但它适用于一些较旧的浏览器，也）。在这种情况下，请记住使用display: inline 设置它们的样式，以便在同一行文本中显示它们。

dl>div 
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;


dl>div>* 
    display: inline;

<dl>
  <div>
     <dd>Name:</dd>
     <dt>John Doe John Doe John Doe John Doe John Doe John Doe John Doe John Doe John Doe John Doe John Doe</dt>
  </div>

  <div>
     <dd>Very long long long long long long long long long long long long Name:</dd>
     <dt>John Doe</dt>
  </div>
</dl>

【参考方案2】：

您应该使用以下内容：

li 
    white-space: nowrap; 
    width: <your width> 
    overflow: hidden;
    text-overflow: ellipsis; 

【讨论】：

我确定我试过这个，但会再次测试。

如果标记是一个定义列表呢？ dt 和 dd 标记没有包含元素，就像第一个示例 (li) 一样。我可以将dt 和dd 包装在一个span 标签中吗？我需要标记以保持语义正确和 HTML5 有效。

@***Newbie，不，你不能使用span 标签。 MDN docs 表示dl 的允许子元素。他们提到了div，但没有给出它的使用示例。如果标签混合在一起，您可能会发现不同的浏览器对标记的解释不同。

我是否应该远离定义列表，即使它在我的应用程序中可能在语义上更正确？或者有没有办法将dt 和dd 视为一个单元，并在它们的组合宽度超过某个阈值时应用椭圆？

【参考方案3】：

你可以用这个来做李

li strong, li  span
  width: 250px; /*change the width according to your choice */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline;
  clear: both;

对于 dl

dl dd, dl dt
  width: 100px; /*change the width according to your choice */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline;
  clear: both;

【讨论】：

@***Newbie 问题是否已解决

对于定义列表，dt 和 dd 应该内联显示。你的 CSS 会起作用吗？

@***Newbie 是的，你应该检查一下

它没有出现内联：jsfiddle.net/sd3ep2ow.

另外 - 我只希望省略号出现一次 - 在组合 dt 和 dd 字符串的末尾。我看到两个省略号：jsfiddle.net/sd3ep2ow/1