0

我有一个<span>标签，，里面.lastMessageLink有一个， 。可以放入的文本可以短到几个字符，也可以长到一个段落，但我想显示最多 4 行文本。<a>.lastMessageText.lastMessageText

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

.lastMessageLink {
    line-height: 1em;
    text-overflow: ellipsis;
    max-height: 4em;
    overflow: hidden;
}

.lastMessageText {
    color: black;
    word-wrap: break-word;
}

这是HTML：

<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/CSS：指定 <span> 内的行数，使用 CSS将文本长度限制为 n 行，使用 CSS 文本溢出来改变设置高度的元素内的文本行数，以及如何为固定数量的文本设置元素高度。

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

4

2 回答 2

2

网络研究以及一些以前的堆栈溢出问题（也在这里）表明，除非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/

于 2012-07-09T22:40:34.560 回答
1

更改<span>为<div>，这应该可以解决我认为的问题

于 2012-07-09T20:46:38.483 回答