I met a problem when I fetch data from the database for a table, there is an unusual long string text inside the data, and the table column has a relative width so the data just stretched the column. I found 3 ways to break an unusual long word in a relatively small container, there are, word-wrap:break-word; word-break: break-all; & overflow-wrap: break-word;

Here is the sample code for these three properties,

<!DOCTYPE html>
<html>
<head>
<style>
p {
  width: 140px; 
  border: 1px solid blue;
 
}

p.a {
  word-wrap:break-word;
}

p.b {
  word-break: break-all;
}

p.c {
  overflow-wrap: break-word;
}
</style>
</head>
<body>

<h1>break an unusually long string at container width</h1>

<h2>default:</h2>
<p>Thisissomeveryveryverylong word. Words will break according to usual rules.</p>

<h2>word-wrap:break-word:</h2>
<p class="a">Thisissomeveryveryverylong word. This text will break at any character.</p>


<h2>word-break: break-all:</h2>
<p class="b">Thisissomeveryveryverylong word. This text will break at any character.</p>

<h2>overflow-wrap: break-word:</h2>
<p class="c">Thisissomeveryveryverylong word. This text will break at any character.</p>

</body>
</html>

And, here is the outcome,



Any feedback is welcome! :-)

References