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

Question

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

null

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

null

应该在第4次“测试”前后切断

Answer 1

公认的答案是令人敬畏的。但是，您仍然可以使用%width并获得text-overflow：ellipsis。解决方法很简单：

display: inline-block; /* for em, a, span, etc (inline by default) */
text-overflow: ellipsis;
width: calc (80%); /* The trick is here! */

似乎每当您使用calc时，最终值都以绝对像素呈现，从而将80%转换为1000px宽度容器的800px。因此，不使用width:[YOUR PERCENT]%，而是使用width:calc([YOUR PERCENT]%)。

Answer 2

text-overflow：省略号；仅在以下条件为真时有效：

• 元素的宽度必须以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，以显示您的距离有多近。

null

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