web-dev-qa-db-ja.com

HTMLでの折り返しを無効にする方法

これを理解できなかったことに愚かな気がしますが、どうすればワードラップをオフにできますか。 cssのWord-wrapプロパティはbreak-Wordで強制的にオンにすることができますが、強制することはできません off （normal値でのみ残すことができます）。

Wordの折り返しを強制的に off にするにはどうすればよいですか。

htmlcssword-wrap
472
Alexander Bird

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

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

783
Jon

上記に欠けているウェブキット固有の値を追加

white-space: -moz-pre-wrap; /* Firefox */
white-space: -o-pre-wrap; /* Opera */
white-space: pre-wrap; /* Chrome */
Word-wrap: break-Word; /* IE */
20
Matas Vaitkevicius

どうしてあなたが解決策として "nowrap"や "pre"を使った "white-space"を見つけたのだろうか、それは正しい振る舞いをしていない：あなたはあなたのテキストを単一行に強制する！テキストは改行する必要がありますが、デフォルトとして単語を改行しないでください。これは、いくつかのcss属性（ワードラップ、オーバーフローラップ、ワードブレーク、およびハイフン）によって引き起こされます。だからあなたはどちらかを持つことができます：

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

そのため、解決策はそれらを削除するか、 "unset"または "normal"で上書きすることです。

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/ /

0
zod