web-dev-qa-db-ja.com

cssオーバーフロー-1行のみのテキスト

次のCSSスタイルのdivがあります。

width:335px; float:left; overflow:hidden; padding-left:5px;

そのdivに長いテキスト行を挿入すると、新しい行に分割され、すべてのテキストが表示されます。私が欲しいのは、改行しないテキストを1行だけ持つことです。テキストが長い場合、このあふれるテキストが消えるようにします。

私は高さを設定することを考えていましたが、それは間違っているようです。

たぶん、フォントと同じ高さを追加しても、動作するはずであり、異なるブラウザで問題を引き起こすことはありませんか？

どうやってやるの？

htmlcssoverflow
116
some Folk

1行に制限する場合は、divでwhite-space: nowrap;を使用します。

302
Septnuits

そのdivで利用可能なコンテンツがまだあることを示したい場合は、「省略記号」を表示することをお勧めします。

text-overflow: Ellipsis;

これは、Septnuitsが提案するwhite-space: nowrap;に追加する必要があります。

また、Firefoxでこれを処理するには、必ず this thread をチェックアウトしてください。

72
Mouli

このCSSコードを使用できます。

text-overflow: Ellipsis; 
overflow: hidden; 
white-space: nowrap;

CSSのtext-overflowプロパティは、テキストが要素のボックスをオーバーフローするときにクリップされる状況を処理します。 クリップ（つまり、カットオフ、非表示）、エリプシス（ '…'、Unicode範囲値U + 2026）を表示できます。

text-overflowは、コンテナのオーバーフロープロパティの値がhidden、scrollまたはautoおよび-の場合にのみ発生することに注意してください。 空白：nowrap;。

テキストのオーバーフローはblockまたはinline-blockレベルの要素でのみ発生します。これは、要素をオーバーフローさせるために幅が必要なためです。オーバーフローは、方向プロパティまたは関連する属性によって決定される方向で発生します。

30
Gaurav Tripathi

uXとUIに最適なコードは

white-space: nowrap;
text-overflow: Ellipsis;
overflow: hidden;
display: inherit;
5
Omid Ahmadyani

追加してください、長いテキストがある場合は、次のCSSコードを使用してください。

text-overflow: Ellipsis;
overflow: visible;
white-space: nowrap;

行全体のテキストを表示します。

1
shafii muhudi