web-dev-qa-db-ja.com

CSS：テキストが1行を超えないようにするにはどうすればいいですか？

テキストの折り返しを防ぐワードラップまたはその他の属性はありますか。私は身長とoverflow:hiddenを持っていますが、それでもテキストは壊れています。

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

htmlcsstextword-wrap
287
Franky
div {
  white-space: nowrap;
  overflow: hidden;
}
<div>test that doesn't wrap</div>

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

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

563
cletus

これを実現するには、 CSS white-space Property を使用できます。

white-space: nowrap
48
Robert C. Barth

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

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

時々スペースの代わりに&nbsp;を使うことはうまくいくでしょう。しかし明らかにそれには欠点があります。

4
grossvogel

わかりやすくするために、これは段落やヘッダーなどでうまく機能します。単に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>

（インラインスタイルを許す）

1
Duncan Jones