私はWord-break: break-all;
を使用しており、 MDNの例 で示されているように、ブラウザーに ハイフン を自動的に挿入させる方法を知りたいと思っています。
div {
width: 80px;
height: 80px;
display: block;
overflow: hidden;
border: 1px solid red;
Word-break: break-all;
hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
}
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
テキストは次のようになります。
aaaaaaaa-
aaaaaaaa-
aaaaaaaa-
aaaaaaaa
JSFiddle も作成しました。
これはIE9/IE10で動作する必要がありますが、Firefoxでも動作し、Chromeでも動作するのであればいいでしょう。
-ms-hyphens
プロパティはIE10 +でのみ機能します。 IE9以下では不可能です。
指定した参照リンクの下部にあるブラウザの互換性チャートを参照してください。
Chromeまだ動作しません: WebKit Hyphenation
Word-break
プロパティとハイフネーションはまったく異なるものです。最初は主に東アジアの言語を主に対象としており、英語などの言語に悪いことをします。Wordが破損したことを示すことなく、いくつかの場所で任意にワードをカットします。
そのため、ブラウザで任意の時点で改行を挿入できる式を使用するか、ハイフネーションを使用するかを決定する必要があります。
ハイフネーションについては、CSSコード自体は問題ありませんが、多くの人は標準プロパティ設定hyphens: auto
最後、接頭辞付きプロパティの後。ただし、テキストの言語はHTMLマークアップで宣言する必要があります。たとえば、 <div lang=en>
。さらに、ブラウザのサポートはまだ制限されています:IE 9はそのようなハイフネーションをサポートしていません。また、IE 10のサポートは、比較的小さな言語セット(英語を含むもちろん)。
IE 9での自動ハイフネーションの場合、サーバー側でプログラムされたハイフネーション、または Hyphenator.js などのツールでより単純なクライアント側のハイフネーションを使用する必要があります。
ブラウザがサポートし、言語にハイフネーション辞書が含まれている場合は、ハイフンが挿入されます。しかし、あなたの
aaaaaaaaaaaaaaaaaa
辞書にありません。
したがって、 https://jsfiddle.net/LJYj3/5/ のようなソフトハイフンを探す必要があります
考えてみてください。 https://stackoverflow.com/a/856322/16960