word-wrap: break word; fix or alternative

Question

With word-wrap: break-word; if the word is going to break anyway, I dont want a line-break first, it is useless and ugly. How to avoid that?

Example:

Given a div with word-wrap: break-word; and a width equivalent to those 23 "x" characters like so:

xxxxxxxxxxxxxxxxxxxxxxx

The div innerHTML is "xx xxxxxxxxxxxxxxxxxxxxxxxxxxxx" like so:

<div>xx xxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>

This is how the innerHTML of the div is displayed vs how it is wanted respecting the 23 "x" width.

What happens:
xx
xxxxxxxxxxxxxxxxxxxxxxx
xxxxx

What I want:
xx xxxxxxxxxxxxxxxxxxxxx
xxxxxxxx

word-break: break-all; and similar or more recent attributes are not a solution to the problem. I dont want words that can avoid breaking to break. I only want words with a width superior than the container width to break BUT without line-break first like with word-wrap: break-word; because it is simply useless and ugly.

With pure CSS, I don't think you can, but I'm happy to be proven wrong. — Thomas, Sep 08 '20 at 06:42
Does this answer your question? [How to force a line break in a long word in a DIV?](https://stackoverflow.com/questions/3058866/how-to-force-a-line-break-in-a-long-word-in-a-div) — MaxiGui, Sep 08 '20 at 06:52
@Thomas - Ok. I just want to precise that answers without pure CSS are also accepted. — 111111111111, Sep 08 '20 at 07:21
@Sfili_81 Sorry I confused word-break: break-all ; and word-break: break-word ; in my last comment (deleted). But word-break: break-all ; is systematically breaking words. I dont want that either. I want words that are going to break any way to break without line-break first and words that can avoid breaking to line break. — 111111111111, Sep 08 '20 at 07:21
Regarding edit 2, I removed it because it would also break words that normally wouldn't have to be broken -> no better than break-all... — Kaiido, Sep 08 '20 at 08:00
Is the person that closed the topic can clarify what is missing? the code to reproduce the behavior is word-wrap: break-word; The problem is that it is line-breaking for no reason when word is too big anyway. — 111111111111, Sep 08 '20 at 08:14
I dont understand why my question is closed. I think people like @Thomas understood it at first sight and some less experienced users throwed easy bad answers that led to think that my question was not clear. Is it closed by a bot? — 111111111111, Sep 08 '20 at 08:37
As @Flash has suggested, `overflow-wrap: break-word;` does what you want it to do (see the note in the [Mozilla spec](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#content)). — James Whiteley, Sep 08 '20 at 08:44
@JamesWhiteley I tested it in chrome and it has the same behavior as word-wrap: break-word; so its not solving the problem. — 111111111111, Sep 08 '20 at 08:51

SeeoX · Answer 1 · 2020-09-08T09:00:47.763

1

In complement of the answer of MaxiGui. You can also use non-breaking space   in your HTML (or replace space with non-breaking space with JS). But I think it's better to use of word-break: break-all;

EDIT : hyphens do all the job https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

edited Sep 08 '20 at 09:00

answered Sep 08 '20 at 06:59

SeeoX

565
3
18

word-break: break-all ; is systematically breaking words. I want words that are going to break anyway to break without line-break first and words that can avoid breaking to line break. – 111111111111 Sep 08 '20 at 07:02
Then you can replace the space just before your long word by a non-breaking space . May be with JS you can detect this words and do the replacement automatically – SeeoX Sep 08 '20 at 07:26
Probably the way to go. I have a chat log box with a resizable width. It means to create an array of the words in each log and to verify the size of each word then remove or add in front – 111111111111 Sep 08 '20 at 07:38
This won't scale with different screen sizes/mobile; it'll only look correct on the size monitor you write it in. – James Whiteley Sep 08 '20 at 08:35
Not if your relaunch the JS at each size modification – SeeoX Sep 08 '20 at 08:54
In fact, with a small research, I find hyphens https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens . It will do all you need – SeeoX Sep 08 '20 at 08:59
@Léo It would be perfect if we find a way to hide the hyphen. – 111111111111 Sep 08 '20 at 09:13
1

Not really the best solution, check the browser compatibility. This is why I did not even offered it. – MaxiGui Sep 08 '20 at 09:17
1

@MaxiGui you are right. Also it seems to only fit the question requirement in the first exemple of the mozilla page. – 111111111111 Sep 08 '20 at 09:22
Hyphens seems to be supported by all browser for English. If another language, then it might not work – SeeoX Sep 08 '20 at 09:41

MaxiGui · Accepted Answer · 2020-09-08T09:10:30.320

0

As @Sfili_81 mentionned it

something like word-break: break-all;

Here you go

var txt = document.getElementById("demo").innerHTML;

var dataArr = txt.split(' ');

var paragraph = document.getElementById("demo");
var finalString = "";
for (var i = 0; i < dataArr.length; i++){
    if (dataArr[i].length > 6 ) {
      finalString = finalString + " <span>"+ dataArr[i]+"</span>"; 
  }
  else{
    finalString = finalString + " " + dataArr[i];
  }
}

paragraph.innerHTML = finalString;

div{
  width:50px;
  background: red;
 
}
span{
  word-break:break-all;
}

<div id="demo">test teeeeeeeeeeest test test test</div>

PS: I still flagged the question as duplicate from: How to force a line break in a long word in a DIV?

EDIT

As break-all is also breaking the whole text / word and break-word is letting a white space / gap before the long word, then it is not adapting. So only solution is JS. In this example, We are injecting span element to text with length over 6.

edited Sep 08 '20 at 09:10

answered Sep 08 '20 at 06:51

MaxiGui

6,190
4
16
33

word-break: break-all ; is systematically breaking words. I want words that are going to break any way to break without line-break first and words that can avoid breaking to line break. – – 111111111111 Sep 08 '20 at 07:01
@111111111111 Here you go with JS solution – MaxiGui Sep 08 '20 at 08:38
JavaScript is completely unnecessary - this can be done with simple CSS: https://jsfiddle.net/fz63oyra/ – James Whiteley Sep 08 '20 at 08:47
1

@James Whiteley No it is not. Look in your fiddle how the second word line-break and break after INSTEAD of just breaking straight away. This is exactly what I say I don't want in my question. – 111111111111 Sep 08 '20 at 08:56
1

@MaxiGui I dont think there is a better way. I'm curious why it is not the default behavior of word-wrap: break-word, i find that it is obviously more elegant without line-break. – 111111111111 Sep 08 '20 at 09:05

score 0 · Answer 3 · answered Sep 09 '20 at 08:46

An alternative solution using jQuery:

HTML:

<div id="demo">xx xxx xxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxx</div>

JS:

$(document).ready(function() {
  var words = $('#demo').text().split(' ');
  $('#demo').empty();
  $.each(words, function(i, v) {
    $('#demo').append($('<span>').text(v));
  })
});

CSS:

#demo {
  width: 100px;
  border: 1px solid #F00;
  word-wrap: wrap;
  word-break: break-all;
}

#demo span {
  display: inline-block;
  border: 1px dashed #00F;
  word-wrap: break-word;
  margin-right: 2px; /* add the space back */
}

This solution is slightly better than the accepted one, as it does not require a hardcoded value of the words' length.

JSFiddle demo

The behavior of your demo is the same as word-wrap: break-word. Look how the third long word is line-breaking before breaking. The question is about avoiding this line-breaking. — 111111111111, Sep 09 '20 at 11:12

word-wrap: break word; fix or alternative

3 Answers3