CSS3 の仕様によると、word-wrap:break-word;
In Chrome you must useの部分的なサポートword-wrap:break-all;
がありますが、ハイフンはありません。私は使用しtext-align:justify;
ています クロムの単語区切りにハイフンがある解決策を思いついた人はいますか?
この質問を数回見ましたが、完全な解決策に出くわしていません。
これが私が現在それをどのように使用しているかのコードサンプルです。
.threecolumn {
-moz-column-width: auto;
-moz-column-count: 3;
-moz-column-gap: 20px;
-moz-column-rule-color: none;
-moz-column-rule-style: none;
-moz-column-rule-width: 0;
-webkit-column-width: auto;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-webkit-column-rule-color: none;
-webkit-column-rule-style: none;
-webkit-column-rule-width: 0;
column-width: auto;
column-count: 3;
column-gap: 20px;
column-rule-color: none;
column-rule-style: none;
column-rule-width: 0;
text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
word-break:break-all; /* chrome, no hyphens :( */
}
FF と Safari で動作します。
使用: Firefox:17 Chrome: 23 Safari: 6.0.2