Question

我有一个<span>标记.lastMessageLink，其中<a>为.lastMessageText，.lastMessageText。可以放在.lastMessageLink { line-height: 1em; text-overflow: ellipsis; max-height: 4em; overflow: hidden; } .lastMessageText { color: black; word-wrap: break-word; }中的文本可以短到几个字符，或者只要一个段落，但我想显示最多4行文本。

我目前使用的样式不起作用，是：

<span class="lastMessageLink">
    <a id="undefined" class="lastMessageText" title="now i need a really really long message so that i can test this whole multiple lines thing which is gonna be a problem and a trickier problem than we had initially thought. it's interesting because you'd think a couple css styles would be enough, but we might have to go by characters" href="#conversation:cid=10714&amp;mid=10735">
        now i need a really really long message so that i can test this whole multiple lines thing which is gonna be a problem and a trickier problem than we had initially thought. it's interesting because you'd think a couple css styles would be enough, but we might have to go by characters
    </a>
</span>

这是HTML：

{{1}}

我查看了HTML/CSS: Specify number of lines inside <span>，Limit text length to n lines using CSS，Using CSS text-overflow to vary the number of lines of text within an element of a set height和How to set element height for a fixed number of lines of text。

我对使用jQuery或Javascript的解决方案持开放态度，因为我无法仅使用CSS取得进展。

Answer 1

对网络以及某些former stack overflow questions（here also）的研究表明，除非设置white-space: nowrap，否则ellipsis不起作用。当然，这意味着它仅适用于一行文本。

一些可能的JQuery插件可以补偿：

三个点 http://tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/

jQuery文本溢出 http://www.bramstein.com/projects/text-overflow/

自动省略 http://pvdspek.github.com/jquery.autoellipsis/

Answer 2

将<span>更改为<div>，这应该是我认为的伎俩

指定span标记内的href的行数

2 个答案: