CSS 文本溢出：省略号；不工作？

Question

我不知道为什么这个简单的 CSS 不起作用…

 .app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

 <div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

应该在第四次“测试”前后中断

原文由 ChristopherStrydom 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

text-overflow:ellipsis; 仅在满足以下条件时才有效：

• 元素的宽度必须限制在 px （像素）中。 % （百分比）中的宽度不起作用。
• 该元素必须具有 overflow:hidden 和 white-space:nowrap 集。

您在这里遇到问题的原因是您的 a 元素的 --- width --- 不受限制。您确实有一个 width 设置，但是因为该元素设置为 display:inline （即默认值），所以它忽略了它，并且没有其他任何东西限制它的宽度。

您可以通过执行以下操作之一来解决此问题：

• 将元素设置为 display:inline-block 或 display:block （可能是前者，但取决于您的布局需要）。
• 将其容器元素之一设置为 display:block 并给该元素一个固定的 width 或 max-width 。
• 将元素设置为 float:left 或 float:right （可能是前者，但同样，就省略号而言，两者都应该具有相同的效果）。

我建议 display:inline-block ，因为这将对您的布局产生最小的附带影响；它的工作原理非常类似于 display:inline 就布局而言，它目前正在使用，但也可以随意尝试其他点；我试图提供尽可能多的信息来帮助你理解这些东西是如何相互作用的；理解 CSS 的很大一部分是理解各种样式如何协同工作。

这是您的代码片段，添加了 display:inline-block 以显示您有多接近。

 .app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

 <div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

有用的参考资料：

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

原文由 Spudley 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

接受的答案很棒。但是，您仍然可以使用 % 宽度并获得 text-overflow: ellipsis 。解决方法很简单：

 display: inline-block; /* for inline elements e.g. span, strong, em etc */
text-overflow: ellipsis;
width: calc(80%); /* The trick is here! */

It seems whenever you use calc , the final value is rendered in absolute pixels, which consequentially 80% to something like 800px for a 1000px 宽度容器。因此，不要使用 width: [YOUR PERCENT]% ，而是使用 width: calc([YOUR PERCENT]%) 。

原文由 Supreme Dolphin 发布，翻译遵循 CC BY-SA 4.0 许可协议