Css: word-break attribute does not work with "."

Question

I'm using word-break to break strings of "........." but it's not working as I'd like despite trying a lot of different styles. The string "..........." will still be a line break and separate from other text, for example "hdhfgf sdf\dshf sduhfusdhf ................ .........................."

This is how I did it:

CSS code :

.breakable-text {
     word-break: break-word;
     overflow-wrap: break-word;
     width: 100%;
}

HTML code

<div class="breakable-text">
hjgjfhd sggdfg  sdfdsf dfgdfg dfdsgs ....................................................................................................
</div>