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

Question

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

我不知道为什么这个简单的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>

应该在4号“测试”周围切断

Answer 1

接受的答案很棒。但是，您仍然可以使用%宽度和达到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%成类似800px的1000px-width容器。因此，而不是使用width: [YOUR PERCENT]%，使用width: calc([YOUR PERCENT]%)。