Word wrap with continuous dot(.) using css

I am trying to do wordwrap with any kind of characters using css.

Here is the css what i am using

.wordbreak {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -webkit-pre-wrap; /*Chrome & Safari */ 
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    white-space: pre-wrap;       /* css-3 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
}

Somehow word wrap doesn't work with continuous dot(.), see this codepen link

In this example you see a lot of dots without any whitespace characters in between. They do not break at the window's edge hence leading to a horizontal scrollbar. After that is a looooong word without any whitespace characters in between and this breaks at the edge of the window as expected.

Why don't the dots break at the window's edge?
Can I solve this in CSS alone?
Is there a workaround, maybe in JavaScript?

Solution

Remove word-break: break-all; form your CSS it will work as expected. You want to break word and you cannot use break-all and break word at the same time

Explanation

word-wrap: break-word recently changed to overflow-wrap: break-word

will wrap long words onto the next line.adjusts different words so that they do no t break in the middle.

word-break: break-all

irrespective of whether it’s a continuous word or many words, breaks them up at the edge of the width limit. (i.e. even within the characters of the same word)

So if you have many fixed-size spans which get content dynamically, you might just prefer using word-wrap: break-word, as that way only the continuous words are broken in between, and in case it’s a sentence comprising many words, the spaces are adjusted to get intact words (no break within a word).

Reference: Find this link description

.wordbreak {
  
white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
white-space: -webkit-pre-wrap; /*Chrome & Safari */ 
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
white-space: pre-wrap;       /* css-3 */
 /* word-break: break-all;  */
word-wrap: break-word;     /* Internet 
  Explorer 5.5+ */

white-space: normal;
}

<div class="content" id='content1'>
  <div class="wordbreak">.................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................</div>
  
  <div class="wordbreak">////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</div>
  
  <div class="wordbreak">hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello</div>
</div>

<div class="wordbreak">Hello its very  very very very very very very very  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very very long text</div>