我不知道为什么这个简单的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次“测试”前后截断
发布于 2018-10-25 04:15:32
公认的答案是很棒的。但是,您仍然可以使用%
width并获得text-overflow: ellipsis
。解决方案很简单:
display: inline-block; /* for inline elements e.g. span, strong, em etc */
text-overflow: ellipsis;
width: calc(80%); /* The trick is here! */
似乎每当您使用calc
时,最终的值都是以绝对像素呈现的,这会相应地将80%
转换为类似于800px
的1000px
-width容器。因此,请使用width: calc([YOUR PERCENT]%)
而不是width: [YOUR PERCENT]%
。
发布于 2018-12-15 01:40:43
发布于 2017-10-06 20:27:49
包括在信息之后写入的四行,以便省略号起作用
.app a
{
color: #fff;
font: bold 15px/18px Arial;
height: 18px;
margin: 0 5px 0 5px;
padding: 0;
position: relative;
text-align: center;
text-decoration: none;
width: 140px;
/*
Note: The Below 4 Lines are necessary for ellipsis to work.
*/
display: block;/* Change it as per your requirement. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
https://stackoverflow.com/questions/17779293
复制相似问题