0

我有一个 div 元素来显示项目的状态。如果状态文本太大，我想换行并显示省略号。下面是项目的 CSS。

.item-status {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-spacing: -0.17em;
    letter-spacing: -0.02em;
    font-size: 8pt;
    float: right;
    width: auto;
    padding-top: 1px;
    text-indent: .25em;
    min-width: 3.25em;
    max-width: 7em;
    padding-right: 2px;
}

而对应的div是

<div class="item-status">This is an open item to test ellipsis</div>

对于此文本，省略号出现在“o”之后，例如

这是一个 o...（12 个字符后）

还有另一个具有相同类的 div

<div class="item-status">Some one is looking into this. Please wait.</div>

对于此文本，省略号显示为

有人我...（10个字符后）

要求在指定字符数（如 10 个字符后）后始终显示省略号。是否可以设置任何属性来控制省略号在换行文本中的显示位置？

4

2 回答 2

1

你不能用 CSS 做到这一点，但你可以用 Javascript 做到这一点。

// gets characters 1 - 10 in newstr
var str = "abcdefghijklmnopqrstuv";
var newstr = str.substr(0, 10);
newstr += '...';
于 2013-03-26T07:12:22.543 回答
0

在花了一些时间摆弄 CSS 之后，发现没有直接的方法可以实现这一点（除了调整字体系列、大小等）。所以现在，建议一种解决方法来浮动 div 'left' 并增加最小宽度。这样 div 就有了显示消息的整个宽度。不需要溢出:)

于 2013-03-27T11:44:47.307 回答