听说你定义了text-overflow: ellipsis; 没生效?

2020-05-23 4,903 阅读1分钟

朋友们有没有试过这种情况？

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

一口气三连后没看到有省略号出现？然后开始胡乱该碰运气期待能生效？现在将会给出准确无疑得解决方法，走起

我们首先要知道：

text-overflow:ellipsis;这个属性，只会在以下条件均成立时才生效：

包裹文字的容器一定要有确定的宽度，有确定单位宽度，如100px, 而要注意的是百分比单位（%）无效，很多人都是因为给容器定了百分比宽度而导致text-overflow:ellipsis不起效
包裹文字的容器必须同时设置两个属性： overflow:hidden 和 white-space:nowrap

以上两个元素缺一不可。

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

.app a {
  height: 18px;
  width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

上面省略号没有生效，为什么？

原因：

a标签是内联元素，直接定宽度还生效，还需要给个display:inline-block或者display:block 让宽度生效

参考：