朋友们有没有试过这种情况?
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
让宽度生效
参考