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

Question

假定以下情况：

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

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

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

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

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

- StackOverflowNewbie

---

第一个会按原样工作，例如使用 li { white-space: nowrap; width: 150px; overflow: hidden; text-overflow: ellipsis; }，因为<strong>和<span>都是display:inline。第二个需要将目标设置为dl dt，因为它是display:block。 - Asons

正如您所看到的，显示类型也很重要，对于 text-overflow: ellipsis; 起作用，元素应该是 块级 类型（例如 “inline-block”、“block”、“flex”，虽然 flex 还有一些需要注意的地方）。 - Asons

Answer 1

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

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规范中是明确允许的，但在一些旧版浏览器中也可以正常工作）。在这种情况下，请记得用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>

- GOTO 0

Answer 2

你应该使用以下内容：

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

- kamentk

---

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

如果标记是一个定义列表，会怎么样呢？与第一个示例（li）不同，dt和dd标签没有包含元素。我是否只需将dt和dd包裹在span标签中？我需要保持标记的语义正确和HTML5有效。 - StackOverflowNewbie

@StackOverflowNewbie，你不能使用span标签。MDN文档中列出了dl元素允许的子元素。他们提到了div，但没有给出它使用的示例。如果混合使用标签，您可能会发现不同的浏览器解释标记的方式有所不同。 - fubar

我是否应该避免使用定义列表，即使在我的应用程序中它可能更语义化正确？或者有没有一种方法可以将 dt 和 dd 视为单个单元，并在它们的组合宽度超过某个阈值时应用省略号？ - StackOverflowNewbie

Answer 3

你可以用这个来做li

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;
}

- Problem Solver

---

@StackOverflowNewbie问题解决了吗？ - Problem Solver

对于定义列表，dt 和 dd 应该内联显示。你的 CSS 能行吗？ - StackOverflowNewbie

@StackOverflowNewbie 是的，应该可以，你可以检查一下。 - Problem Solver

它没有内联显示：https://jsfiddle.net/sd3ep2ow/. - StackOverflowNewbie

@StackOverflowNewbie，请检查现在的答案已经更新。 - Problem Solver