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]%)。