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

私はdiv次のCSSスタイルを持っています：

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

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

高さの設定を考えていましたが、間違いのようです。

多分私がフォントと同じ高さを追加した場合、それは機能し、異なるブラウザで問題を引き起こさないはずですか？

どうやってやるの？

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

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

text-overflow: ellipsis;

これはwhite-space: nowrap;Septnuitsによって提案されたものに追加する必要があります。

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

次のcssコードを使用できます。

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

CSS のtext-overflowプロパティは、要素のボックスからテキストがオーバーフローしたときにテキストがクリップされる状況を扱います。それは可能なクリッピング（すなわち隠された、カットオフ）、表示省略記号を（「...」、Unicodeの範囲値U + 2026）。

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

テキストオーバーフローは、ブロックまたはインラインブロックレベルの要素でのみ発生する可能性があります。これは、要素がオーバーフローするために幅を持つ必要があるためです。オーバーフローは、directionプロパティまたは関連する属性によって決定される方向で発生します。

UXとUIに最適なコードは

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;

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

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

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

width:200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

幅も定義して、オーバーフローを1行に設定します

私は同じ問題を抱えていて、私はそれを使ってそれを解決しました：

display: inline-block;

上divでの質問。