Question: CSS property "word-break: break-all" isn't working expectedly with specific characters in Chrome

Question

CSS property "word-break: break-all" isn't working expectedly with specific characters in Chrome

Answers 2
Added at 2016-12-26 10:12
Tags
Question

I'm using "word-break: break-all" to insert breaks between any characters.
However, in Chrome, It's not working expectedly with specific characters (e.g colon, semicolon, comma) like below.
(My codepen is here: https://codepen.io/yukito/pen/wobZJq)

source code:

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

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

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

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

In FireFox and Safari, it's working expectedly.

My questions:
. Is it a bug ? or a spec?
. How do I break line between continuous semicolons in Chrome ?

Thank you.

Update:

"break-word" breaks line considering word boundaries like this pen: https://codepen.io/yukito/pen/xRNopJ
I really want to insert breaks between any characters without considering word boundaries.

Answers to

CSS property &quot;word-break: break-all&quot; isn&#39;t working expectedly with specific characters in Chrome

nr: #1 dodano: 2016-12-26 11:12

For webkit browsers, you need to add:

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

Demo

nr: #2 dodano: 2016-12-26 11:12

Use break-work property instead of break-all.

Have a look at the snippet below:

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

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

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

Hope this helps!

Source Show
◀ Wstecz