Question

假设以下内容：

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

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

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

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

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

Answer 1

您应该使用以下内容：

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

Answer 2

只需在包含的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>

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

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

3 个答案: