web-dev-qa-db-ja.com

`Word-break：break-all`で自動CSSハイフンを使用するには？

私は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でも動作するのであればいいでしょう。

csscss3word-break
21
chovy

-ms-hyphensプロパティはIE10 +でのみ機能します。 IE9以下では不可能です。

指定した参照リンクの下部にあるブラウザの互換性チャートを参照してください。

Chromeまだ動作しません： WebKit Hyphenation

8
Ben Lee

Word-breakプロパティとハイフネーションはまったく異なるものです。最初は主に東アジアの言語を主に対象としており、英語などの言語に悪いことをします。Wordが破損したことを示すことなく、いくつかの場所で任意にワードをカットします。

そのため、ブラウザで任意の時点で改行を挿入できる式を使用するか、ハイフネーションを使用するかを決定する必要があります。

ハイフネーションについては、CSSコード自体は問題ありませんが、多くの人は標準プロパティ設定hyphens: auto最後、接頭辞付きプロパティの後。ただし、テキストの言語はHTMLマークアップで宣言する必要があります。たとえば、 <div lang=en>。さらに、ブラウザのサポートはまだ制限されています：IE 9はそのようなハイフネーションをサポートしていません。また、IE 10のサポートは、比較的小さな言語セット（英語を含むもちろん）。

IE 9での自動ハイフネーションの場合、サーバー側でプログラムされたハイフネーション、または Hyphenator.js などのツールでより単純なクライアント側のハイフネーションを使用する必要があります。

21
Jukka K. Korpela

ブラウザがサポートし、言語にハイフネーション辞書が含まれている場合は、ハイフンが挿入されます。しかし、あなたの

aaaaaaaaaaaaaaaaaa

辞書にありません。

したがって、 https://jsfiddle.net/LJYj3/5/ のようなソフトハイフンを探す必要があります

考えてみてください。 https://stackoverflow.com/a/856322/16960

3
Volker E.