html - CSS でのテキスト オーバーフローの使用

Question

<div id="wrap">
    <p style="text-overflow:ellipsis;width:100%;"> Pope Benedict XVI becomes the first pontiff to resign in nearly 600 years, saying his health is deteriorating.</p>
</div>

これがhtmlです。

コンテナのサイズを超えた場合に ... で終わるテキストを作成したいと考えています。この例から学びましたが、うまくいきません。ここで試すためのフィドルを作成しました。

テキストがサイズを超えたときに、実際に複数の行を作成してから...で終了したいと思います。それは可能ですか？とにかく1行だけで困っています。

Answer 1

white-space&overflowスタイルは<p>ではなくに配置する必要があり<div>ます (実際には、 を移動するだけで済みますoverflowが、このコンテキストでは一緒に使用されるため、別々ではなくクラス内でペアにしておいた方がよい場合があります)。

#wrap {
    width: 200px;
    background-color: red;
}

.ellipsis-overflow {
    text-overflow: ellipsis;
    width: 100%;   
    white-space: nowrap;
    overflow: hidden;
}

<div id="wrap">
    <p class="ellipsis-overflow"> Pope Benedict XVI becomes the first pontiff to resign in nearly 600 years, saying his health is deteriorating.</p>
</div>

ここで動作することを確認してください。

Answer 2

P タグを削除すると機能するか、スタイルを P タグに配置します。

http://jsfiddle.net/BTCEY/11/

<div id="wrap">
    Pope Benedict XVI becomes the first pontiff to resign in nearly 600 years, saying his health is deteriorating. Pope Benedict XVI becomes the first pontiff to resign in nearly 600 years, saying his health is deteriorating.
</div>

#wrap{
    width:200px;
    height: 200px;
    background-color:red;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
    padding: 20px;
}