1

「word-break: break-all」を使用して、文字間に区切りを挿入しています。
ただし、Chrome では、以下のような特定の文字 (コロン、セミコロン、コンマなど) では期待どおりに動作しません。
(私のコードペンはこちら: https://codepen.io/yukito/pen/wobZJq )

ソースコード：

<style>
  .test {
    width: 300px;
    word-break: break-all;

    /* cosmetic */
    background-color: red;
    margin-bottom: 5px;
  }
</style>

<div class="test">
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
</div>

<div class="test">
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
</div>

FireFox と Safari では、期待どおりに動作しています。

私の質問:
. バグですか？それとも仕様？
. Chrome で連続するセミコロンの間で改行するにはどうすればよいですか?

ありがとうございました。

アップデート：

「break-word」は、このペンのように単語の境界を考慮して改行します: https://codepen.io/yukito/pen/xRNopJ
単語の境界を考慮せずに任意の文字間に改行を挿入したいのです。

4

2 に答える 2

1

break-wordの代わりにプロパティを使用しますbreak-all。

以下のスニペットをご覧ください。

<style>
  .test {
    width: 300px;
    word-break: break-word;
  
    /* cosmetic */
    background-color: red;
    margin-bottom: 5px;
  }
</style>

<div class="test">
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
</div>

<div class="test">
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
</div>

お役に立てれば！

于 2016-12-26T10:04:26.573 に答える
0

Webkit ブラウザーの場合、以下を追加する必要があります。

 .test {
      word-break: break-word;
    }

デモ

于 2016-12-26T10:02:19.460 に答える