一个非常简单的问题，但我还没有找到答案。
有一个带有文本的div
<div class="hkb">Revenue</div>
css如下:
.hkb{
width: 28px;
height: 15px;
line-height: 11px;
font-size: 8px;
overflow: hidden;
text-overflow: ellipsis;
padding: 5px 8px;
box-sizing: border-box;
}
那么问题来了:
- 将宽度值改为36px，输出显示'R...'，没错，因为'Revenue'的真实宽度是36px - 2*8px = 20px;
- 将宽度值更改为 28px，输出显示 '...'，这也是预期的，28 - 2*8 = 12；
- 将宽度值更改为 27 或以下，输出将显示 'Rev'，'Revenue' 的真实宽度为 27px - 2*8px = 11px，可能宽度不足以容纳文本，所以它剪辑。
我想要的是在div的宽度变的很短的时候防止裁剪，希望它还能显示'...'
这里是 jsFidle .
最佳答案
text-overflow: ellipsis property required sum width 请试一试。
<body>
<div class="hkb">Revenue</div>
</body>
.hkb{
width: 40px;
height: 15px;
line-height: 11px;
font-size: 8px;
overflow: hidden;
text-overflow: ellipsis;
padding: 5px 8px;
box-sizing: border-box;
white-space: nowrap;
}
直播 Demo
关于html - 文本溢出 :ellipsis will not work when content is too short，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28080053/