'Unable to break text on hyphen within floated element
The following image shows how I would like a set of nested elements to appear.
However, the elements are actually appearing like this...
I've tried setting various overflow and white-space options but can't achieve what I'm hoping for. My best guess is that the float is causing the blue-outlined element to have no width and consequently there's no reason to break the text.
How can I fix this?
Solution 1:[1]
If the person's surname is long without any spaces then the blue bordered element cannot fit in the same level as of the left element.
To make the blue bordered element fit in the same level as the left element you have to give some width to it along with word-break property.
<div style="width:25%;background:#ccc;float:left;word-break:break-word">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="width:74%;background:#ccc;float:left;margin-left:1%;word-break:break-word">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | krish |