div要素で長すぎるテキストを非表示にする方法はありますか？

Question

divでオーバーフローを隠す方法はありますか？

テキストが長いのdiv

<div style="width:50px; border:1px solid black; overflow-y:hidden"> 
    test test test test 
</div> 

Answer 1

オーバーフローしてみてくださいよりであればここでは、テキストだけの新しい行にダウンラップ：なし。

スクロールバーを使用するかどうかについては言及していません。

EDIT：隠された：私はオーバーフローを意味

申し訳ありません。

Answer 2

divにheightを指定する必要があります。overflow: hidden;は、何らかの種類の高さが定義されている場合、垂直方向にオーバーフローするコンテンツのみを非表示にすることができます。言い換えれば

：

ここにテキストが長いのdiv

を超える場合、テキストだけの新しい行にダウンラップしかし、それはどのくらいです実際にdiv？

この違いを示すmy jsFiddle demonstrationをご覧ください。

Answer 3

固定幅のdivに1行のテキストだけを表示する場合は、white-space:nowrapを入力してください。 overflow:hiddenと一緒にすると、ブラウザが行を壊さずに強制的な幅に表示されます。

また、単語と文字を半分にするのを避けるためにtext-overflow:ellipsisを追加することもできます。最後に...という文字列が追加されています。私はブラウザのサポートについては確信していませんが、私はこれを試したことはありません。

Answer 4

CSSプロパティtext-overflow: ellipsisは、おそらくこの問題を解決するのに役立ちます。

<div id="truncateLongTexts"> 
    test test test test 
</div> 

#truncateLongTexts { 
    width: 100px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis // This is where the magic happens 
}