overflow - 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>

应该切断第四次“测试”

Answer 1

text-overflow:ellipsis;仅在满足以下条件时起作用：


元素的宽度必须限制为px（像素）。 %中的宽度（百分比）不起作用。
元素必须设置为overflow:hidden和white-space:nowrap。


您在这里遇到问题的原因是，您的width元素的a不受限制。您确实有一个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