HTML: How to force a long text to break

Question

I know that there are related questions already posted on this site, but i still cannot find the right code for this.. I already searched the net and I found some right answers regarding this question. This the code I used to force break a line

/* break long text without spaces */         
word-break: break-all;       
word-break: break-word;          
hyphens: auto;

im ok with the long text, problem has been solved with the above code.. but for normal texts: (tho the word is not that long, it's still been splitted)

If Mail notifications is check 
ed, you will receive notificat 
ions about any event that occu 
rs on the projects you belong to

**

here is the link of what I've started http://jsfiddle.net/y4Mdy/1802/

sorry if my explanation is too vague. thanks in advance to all who will reply :)

What is the behavior you're looking for? When I open your jsfiddle, and adjust the width, the words in the text don't get split (like it's supposed to, right?) — CherryNerd, Feb 16 '16 at 10:53
I don't want short words to get splitted, instead it will just go to the next line — , Feb 16 '16 at 10:56
The demo you provided does not show the issue - http://puu.sh/n9VAV/8bd871687f.png — Aziz, Feb 16 '16 at 11:00
based on my sample above..instead of creating a new line when reaching the word **checked** ... it gets split , making it a two words(check, ed) — , Feb 16 '16 at 11:00
CSS can't detect long or short words...it can only do what you tell it to. You'll have to pick the behaviour you require. — Paulie_D, Feb 16 '16 at 11:01
might be useful to check `text-overflow` and [this technique](http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/) — Uzi, Feb 16 '16 at 11:04

score 1 · Answer 1 · edited May 23 '17 at 12:16

1

The behavior is because of word-break: break-all; as it breaks words even if it continuous and extends the width. so you can simply use overflow-wrap: break-word.

For more on this read What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS

edited May 23 '17 at 12:16

Community

1
1

answered Feb 16 '16 at 11:02

Santhosh

8,181
4
29
56

1

That's perfect! – naxo8628 Aug 30 '19 at 08:49

score 0 · Accepted Answer · answered Feb 16 '16 at 12:01

JS fiddle: http://jsfiddle.net/y4Mdy/1809/

If I got you right, you wanted to break all the spaces and display them later? If so I have a way, hoping this is what you actually asked for:

<body>

  <div id="form" class="message-box">
    <div class="message-containter">
        If Mail notifications is checked, you will receive notifications about any event that occurs on the projects you belong to (issue added or edited, new document,...).
      </div>


      <div class="message right">
        dfsfsfsfsfddfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfs
      </div>
    </div>


  </div>

 <br> <div id ="newdiv"></div>

</body>

JS:

<script type="text/javascript">

var getclass = document.getElementsByClassName("message-containter")[0].innerHTML;
var result = text(getclass);

function text(text){

    var arr = text.split("");

    for (var i = 0; i < arr.length; i++){ //loop through the array
        if (arr[i] !== " "){ //if there isn't a space
            var current = document.getElementById('newdiv');
            current.innerHTML = current.innerHTML + arr[i]; //write the letter
        }
    }


}

console.log(document.getElementById('newdiv').innerHTML); //the entire string

</script>

HTML: How to force a long text to break

2 Answers2