0

<span>タグ、が.lastMessageLinkあり、その<a>中に があり.lastMessageTextます。入れることができるテキストは.lastMessageText、数文字程度の短いものでも、1 段落程度の長さでもかまいませんが、最大 4 行のテキストを表示したいと考えています。

機能していない現在のスタイリングは次のとおりです。

.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 text-overflow を使用して、設定された高さの要素内のテキストの行数を変更する、および方法テキストの固定行数に対して要素の高さを設定します。

私は、CSS だけでは進歩を遂げることができなかったので、jQuery または Javascript を使用するソリューションに対してオープンです。

4

2 に答える 2

2

Web での調査や以前のスタック オーバーフローの質問(ここでも) は、white-space: nowrapが設定されてellipsisいない限り機能しないことを示しています。もちろん、これは 1 行のテキストでしか機能しないことを意味します。

補正できるいくつかの可能な 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 に答える