Question

一个非常简单的问题，但我找不到答案。

有一个带文字的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，输出显示＆＃39; R ...＆＃39;，它是正确的，因为＆＃39;收入＆＃39;的真实宽度。是36px - 2 * 8px = 20px;
将宽度值更改为28px，输出显示＆＃39; ...＆＃39;，它也是预期的，28 - 2 * 8 = 12;
将宽度值更改为27或更低，输出将显示＆＃39; Rev＆＃39;，＆＃39;收入＆＃39;的真实宽度。是27px - 2 * 8px = 11px，也许宽度不足以容纳文本，所以剪辑。

我想要的是当div的宽度变得非常短时防止剪裁，我希望它仍然可以显示＆＃39; ...＆＃39;

这是jsFidle。

Answer 1

text-overflow：省略号属性需要和宽度请试试。

<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

text-overflow：当内容太短时，省略号将不起作用

1 个答案: