How word-break property just breaks from space? - html

Question

I have a <td> with word-break: break-all; property. It works, but I have a small problem, If I have a long and integrated (without space) text (more than width), it is very good for me, like this:
html:
<table>
<tr>
<td>
testtttttttttttttttttttttttttttttttttttttttttttttttttttt
</td>
</tr>
</table>
css:
td{
width: 50px;
word-break: break-all;
}
output: (that is OK)
+-----------50px-----------+
|testtttttttttttttttttttttt|
|tttttttttttttttttttttttttt|
|tttt |
+--------------------------+
But when I have a long and Not integrated (with space) text, it won't work correctly. like this:
<td>Hello world.., this is a test text. this is a test text.</td>
output:
+-----------50px-----------+
|Hello world.., this is a t|
|est text. this is a test t|
|ext. |
+--------------------------+
How can I fix it? I want something like this:
+-----------50px-----------+
|Hello world.., this is a |
|test text. this is a test |
|text. |
+--------------------------+

Answer 1

You don't need word-break: break-all;. What you only need is word-wrap: break-word (or overflow-wrap: break-word)
Example:
#container {
width: 70%;
border: 1px solid;
margin: 0 auto;
}
table {
width: 100%;
table-layout: fixed;
}
td { word-wrap: break-word }
<div id="container">
<table>
<tr>
<td class="cc">contentttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</td>
<td class="cc">Hello world.., this is a test text. this is a test text.</td>
</tr>
</table>
</div>
Fiddle: http://fiddle.jshell.net/m73mcm74/3/
Also, please refer to this answer to your earlier question: https://stackoverflow.com/a/31936379/1355315