word-wrap: break-word; repair or substitute

Question

word-wrap: break-word; repair or substitute

Is there a way to prevent line breaks before words that are going to break anyway when using word-wrap: break-word;? It seems unnecessary and unattractive. Any suggestions?

For Example:

Consider a div with word-wrap: break-word;, set at a width equal to 23 "x" characters like this:

xxxxxxxxxxxxxxxxxxxxxxx

The innerHTML of the div is "xx xxxxxxxxxxxxxxxxxxxxxxxxxxxx" as follows:

<div>xx xxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>

This demonstrates how the innerHTML of the div is presented compared to the desired display within a 23 "x" width.

Current Output:
xx
xxxxxxxxxxxxxxxxxxxxxxx
xxxxx

Desired Output:
xx xxxxxxxxxxxxxxxxxxxxx
xxxxxxxx

Using word-break: break-all; or similar attributes does not solve the issue. I want words that fit within the container width to remain intact without breaking, while only allowing words wider than the container width to break without an initial line break like with word-wrap: break-word; which is both superfluous and unsightly.

javascript html css word-wrap

Answer 1

Answer №1

Adding on to MaxiGui's response, another option is to incorporate non-breaking spaces   in your HTML code (or replace regular spaces with non-breaking spaces using JavaScript). However, I personally believe that utilizing word-break: break-all; is a more effective approach.

UPDATE: Hyphens can handle everything effectively https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

Answer 2

Adding on to MaxiGui's response, another option is to incorporate non-breaking spaces   in your HTML code (or replace regular spaces with non-breaking spaces using JavaScript). However, I personally believe that utilizing word-break: break-all; is a more effective approach.

UPDATE: Hyphens can handle everything effectively https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

Answer 3

Answer №2

As mentioned by @Sfili_81

something similar to word-break: break-all;

Here is the solution:

const text = document.getElementById("demo").innerHTML;

const dataArray = text.split(' ');

const paragraph = document.getElementById("demo");
let finalText = "";
for (let j = 0; j < dataArray.length; j++){
    if (dataArray[j].length > 6 ) {
      finalText = finalText + " <span>"+ dataArray[j]+"</span>"; 
  }
  else{
    finalText = finalText + " " + dataArray[j];
  }
}

paragraph.innerHTML = finalText;

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

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

PS: The question has been flagged as a duplicate of: How to force a line break in a long word in a DIV?

EDIT

Since both `break-all` and `break-word` have limitations, the only solution is Javascript. In this example, we are adding span elements to words with a length over 6 characters.

Answer 4

As mentioned by @Sfili_81

something similar to word-break: break-all;

Here is the solution:

const text = document.getElementById("demo").innerHTML;

const dataArray = text.split(' ');

const paragraph = document.getElementById("demo");
let finalText = "";
for (let j = 0; j < dataArray.length; j++){
    if (dataArray[j].length > 6 ) {
      finalText = finalText + " <span>"+ dataArray[j]+"</span>"; 
  }
  else{
    finalText = finalText + " " + dataArray[j];
  }
}

paragraph.innerHTML = finalText;

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

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

PS: The question has been flagged as a duplicate of: How to force a line break in a long word in a DIV?

EDIT

Since both `break-all` and `break-word` have limitations, the only solution is Javascript. In this example, we are adding span elements to words with a length over 6 characters.

Answer 5

Answer №3

Here is an alternative approach using jQuery:

Below is the HTML code snippet:

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

JS code snippet:

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

CSS styles:

#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; /* adding space back */
}

This method offers a slight improvement over the original solution by eliminating the need for a hardcoded word length.

Check out the JSFiddle demo here

Answer 6

Here is an alternative approach using jQuery:

Below is the HTML code snippet:

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

JS code snippet:

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

CSS styles:

#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; /* adding space back */
}

This method offers a slight improvement over the original solution by eliminating the need for a hardcoded word length.

Check out the JSFiddle demo here

word-wrap: break-word; repair or substitute

Answer №1

Answer №2

Answer №3

Similar questions

Can HTML Elements be used within a Contenteditable section?

The jQuery method .on gathers and retains click events

Steps for accessing the value from an input tag within the same form:

Making sure Angular picks up on $scope changes

The entry '0-0' already exists for the key 'local_part', please enter a unique value

"Create a table with rows that automatically adjust to the same height, regardless

Contrasting the utilization of Angular $scope dependency with independent usage

How can I customize the appearance of tab buttons in a QtabWidget using PySide?

[webpack]: npm ERROR! Call stack size limitation exceeded

trouble encountered while parsing JSON information using JavaScript

When integrating react-router 5 and redux 7, there is an issue where the state is not being reset when navigating to a new route using react-router's <Link

Is there a way to execute .jsx Photoshop scripts on images using Java?

Activate audio and trigger notification

When I submit a form with an empty date input field, the Datepicker is sending a 0000-00-00 date

Python makes sure that HTML values remain constant even after a button is clicked by Selenium

Resizing images using a dynamic frame size

Storing div content in database directly

Navigating JSON within HTML forms

Tailwind custom classes are not being rendered on mobile devices and Chrome DevTools, however, they are functioning properly on desktops and Safari DevTools

Is it possible to implement a custom radio tab index without using JavaScript