HTMLの折り返しをオフにする方法は？

517

これを理解できないのはばかげていますが、ワードラップをオフにするにはどうすればよいですか？css word-wrapプロパティはで強制的にオンにするbreak-wordことができますが、強制的にオフにすることはできません（normal値のままにしておくことができます）。

どのように私はワードラップを強制しますオフ？

html css word-wrap

— アレクサンダーバード
ソース

852

CSS white-space属性を使用する必要があります。

特に、white-space: nowrapそしてwhite-space: pre最も一般的に使用される値です。最初のものはあなたが求めているもののようです。

— ジョン
ソース

25

上記にないwebkit固有の値を追加

white-space: -moz-pre-wrap; /* Firefox */
white-space: -o-pre-wrap; /* Opera */
white-space: pre-wrap; /* Chrome */
word-wrap: break-word; /* IE */

— マタス・ヴァイトケビキウス
ソース

3

「nowrap」または「pre」を使用した「空白」を解決策として見つけるのはなぜでしょうか。それは正しい動作を行わないためです。テキストを1行に強制します！テキストは行を分割しますが、デフォルトでは単語を分割しません。これは、一部のcss属性（ワードラップ、オーバーフローラップ、ワードブレーク、ハイフン）が原因です。だからあなたはどちらかを持つことができます：

word-break: break-all;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

したがって、解決策はそれらを削除するか、「設定解除」または「通常」で上書きすることです。

word-break: unset;
word-wrap: unset;
overflow-wrap: unset;
-webkit-hyphens: unset;
-moz-hyphens: unset;
-ms-hyphens: unset;
hyphens: unset;

更新：JSfiddleで証明も提供します：https ://jsfiddle.net/azozp8rr/

— ゾッド
ソース

1

一般的に言葉を打ち破る理由を理解しています。しかし、折り返しを有効にする正当な理由がないと仮定することは、私には意味がありません。私はすぐに「未設定」のソリューションをテストしてみましたが、まだ折り返しがありました。動作すると思われる場合は、動作するjsfiddleデモを提供してください。

— アレクサンダーバード

なぜ私の返事が消えたのか分かりません。繰り返しになりますが、ノーラップを強制することができます。通常、ボタンに対して行われます。しかし、テキストがコンテナの外に出てしまう可能性があるため、応答性の理由からそれは悪いデザインだと思います。とにかく、質問は強制されたword-wrap：break-wordについて尋ねていて、強制的にオフにする方法を尋ねていました。だから、私はそれを行うためのコードを提供しました。whitespace：nowrapは別のことであり、改行を削除するのではなく、改行全体を削除します。また、私はJSfiddleとコードの比較を提供：https://jsfiddle.net/azozp8rr/

— ZOD

2

これは、Chromeのテキスト領域内で愚かな仕事の中断が発生するのを防ぐのに役立ちました

word-break: keep-all;

— ライアン・チャームリー
ソース