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>