36

MDN の例で示されているように、ブラウザにハイフンを自動的に挿入させる方法を使用してword-break: break-all;おり、知りたいと思っています。

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 でも動作するとよいでしょう。

4

4 に答える 4

28

プロパティとハイフネーションはword-breakまったく異なるものです。最初のものは、もともと主に東アジアの言語を対象としており、英語などの言語に悪いことをします。単語が壊れたことを示すことなく、一部のポイントで任意に単語をカットします。

したがって、ブラウザで任意の時点で改行を挿入できる式があるかどうか、またはハイフネーションが必要かどうかを判断する必要があります。

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

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

于 2013-03-07T04:47:18.943 に答える
12

この-ms-hyphensプロパティは IE10+ でのみ機能します。IE9以下ではできません。

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

Chrome ではまだ動作しません: WebKit ハイフネーション

于 2013-03-07T02:01:47.657 に答える
12

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

aaaaaaaaaaaaaaaaaa

辞書にありません。

したがって、 https://jsfiddle.net/LJYj3/5/&shy;のように、満足のいくようにソフトハイフンを挿入する必要があります

ここにもっと考えるべきことがあります：https://stackoverflow.com/a/856322/1696030

于 2013-03-07T02:05:30.323 に答える
0

これに対するcssソリューションを見つけることができなかったので、jsで修正してください。

const addWordBreaks = (str, maxLength = 10) => {
    const words = str.split(" ");
    const newWords = [];
    words.forEach(function(word) {
      if (word.length > maxLength) {
        const firstWord = word.substr(0,maxLength);
        const endWord = word.substr(maxLength, word.length-1);
        newWords.push(firstWord +"- \n");
        newWords.push(endWord)
      } else {
        newWords.push(word)
      }
    });
     return newWords.join(" ");
  }
于 2021-06-09T17:47:48.277 に答える