多个元素和CSS文本溢出/省略号

Question

假设如下:

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

标签部分(标签中的字符串<strong>)和值部分(<span>标签中的字符串)可以具有任何长度.因此,有时标签可能很长,价值可能很短,反之亦然,或短,或两者都很长.

当标签和值的组合宽度超过指定的宽度时,我希望连接字符串的尾端显示省略号.我如何在CSS中执行此操作？

更新:如果标记看起来像这样怎么办？

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

Answer 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>元素括在 a 中<div>（自 HTML5 以来，规范明确 允许这样做，但它也适用于一些较旧的浏览器）。在这种情况下，请记住将它们设置为样式以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>

Answer 2

您应该使用以下内容:

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