2

text-overflow: ellipsis に問題があります - 私のサイトでは動作しません。私は現在学んでおり、固定の高さのテキストを含む div があるこのプロジェクトがあります。text-overflow: ellipsis を試しましたが、うまくいかないようです。今私のコードは次のようになります：

<section class="comments">
    <p>
        Here is a short comment. 
    </p>

そして私のCSSは：

.comments p {
    height: 40px;
    text-align: justify;
    text-overflow: ellipsis-word;
    line-height: 20px;
    word-wrap: break-word;
    overflow: hidden;
}

動作するはずですが、動作しません。Firefox、Chrome、Opera、IE9 で開こうとしましたが、どれも機能しません。テキストを含むにスタイルを入れようとしましたが、<p>役に立ちませんでした。を に変更して<p>から<div>、 にスタイルを設定しようとしました<div>が、うまくいきませんでした。text-overflow: ellipsis only で試しましたが、うまくいきませんでした。text-overflow: clip で試しました - うまくいきませんでした。明らかに私はどこかで間違いを犯していますが、あまりにも明白すぎてそれを見ることができないと思います。ヘルプ！

4

1 に答える 1

3

http://www.quirksmode.org/css/contents.htmlは、「このプロパティは、ボックスにwhite-space: nowrapとoverflow以外のがある場合にのみ意味があります」と述べていますvisible。

CSS3仕様text-overflowではないことに注意してください。

また、ellipsis-word実装されていないようです。このスタイルは私にとってはうまくいきます（Win / FirefoxおよびChrome）：

.comments p {
    height: 60px;
    text-align: justify;
    text-overflow: ellipsis;
    line-height: 20px;
    word-wrap: break-word;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #000000;
}
于 2012-07-24T15:28:32.757 に答える