テキストが1行を超えるのを防ぐ方法は？

332

テキストの折り返しを停止するワードラップまたは他の属性はありますか？高さがありoverflow:hidden、テキストがまだ途切れます。

CSS3より前のすべてのブラウザーで動作する必要があります。

— Isherwood
ソース

632

div {
  white-space: nowrap;
  overflow: hidden;
}

<div>test that doesn't wrap</div>

スニペットを展開

注：これはブロック要素でのみ機能します。これをテーブルセルに対して行う必要がある場合（たとえば）、テーブルセルにはブロックではなく表示テーブルセルがあるため、テーブルセル内にdivを配置する必要があります。

CSS3以降、これはテーブルセルでもサポートされます。

— クレタス
ソース

12

ホワイトスペース！それは私が探していたものです... 1,000ありがとう...これはグーグルすることは不可能です！

2

ワードラップ（IIRC）と呼ばれる独自のie属性もあります...愚かなIE。

— ガロー2009

21

「text-overflow：省略」も考慮してください。コンテナの幅の範囲外になると、テキストの末尾に...が追加されます

— Drew Landgrave

1

「これはブロック要素でのみ機能します」というコメントは正しいと思います。アンカー、段落、見出しなどでこれを試した場合、これは機能しません。あなたは次のようなことをする必要がありますp.oneline { white-space:nowrap; overflow:hidden; display:block;}

— アレックスアンジェリコ

オーバーフローを隠すことに注意してください。それはビジネスを意味します。

— デビッドA.グレイ

57

CSS white-space Propertyこれを達成するために使用できます。

white-space: nowrap

— ロバート・C・バース
ソース

36

省略記号を使用すると、最後に...が追加されます。

   <style type="text/css">
    div {
      white-space: nowrap;
      overflow: hidden;
text-overflow: ellipsis;
    }
    </style>

— ビベック
ソース

4

 スペースの代わりに使用するとうまくいく場合があります。ただし、明らかに欠点があります。

— Grossvogel
ソース

残念ながら、私はこの状況でそれを行うことはできません

2

非常に明確にするために、これは段落やヘッダーなどでうまく機能しますdisplay: block。指定する必要があるのは、だけです。

例えば：

<h5 style="display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
  This is a really long title, but it won't exceed the parent width
</h5>

（インラインスタイルを許してください）

— ダンカンジョーンズ
ソース