First word breaks unnecessarily at the end of the line
mndzielski opened this issue · comments
Hi,
I use css word-wrap: break-word; to force long words to break. Unfortunately if at the end of line there is new html element like <b>text ...</b> first word breaks. If there is enough place situation doesn't appear for second word. In third case if I don't use word-wrap b element doesn't break.
HTML code:
<html>
<head>
<style>
.wrap {
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="wrap">
1. OpenHTMLtoPDF OpenHTMLtoPDF OpenHTMLtoPDF OpenHTMLtoPDF OpenHTMLtoPDF <b>OpenHTMLtoPDF OpenHTMLtoPDF OpenHTMLtoPDF OpenHTMLtoPDF</b>
</div><br/>
<div class="wrap">
2. OpenHTMLtoPDF OpenHTMLtoPDF OpenHTMLtoPDF OpenHTMLtoPDF <b>OpenHTMLtoPDF OpenHTMLtoPDF OpenHTMLtoPDF OpenHTMLtoPDF</b>
</div><br/>
<div>
3. OpenHTMLtoPDF OpenHTMLtoPDF OpenHTMLtoPDF OpenHTMLtoPDF OpenHTMLtoPDF <b>OpenHTMLtoPDF OpenHTMLtoPDF</b>
</div>
</body>
</html>
and the result:
What can I do to fix it?
Hi @danfickle
I've started to test your changes and I've discovered that there is a significant issue with word-wrap: break-word;.
Code:
<html>
<head>
<style>
@page {
size: 210mm 7cm;
}
body {
border: 1px solid black;
}
.wrap {
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="wrap">
aaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa123456789 bbbbbbbbbbbb ccccccccccc
</div><br/>
<div class="wrap">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa123456789 bbbbbbbbbbbb ccccccccccc
</div>
</body>
</html>
Previously the result was:
And now it is:
So now if the first word in the line is too long it not breaks at all (case 2). 😢
If problem is with the second one I think current behavior is better (case 1) 😄
I've committed take 2 on fixing this issue. I think it is more robust. Thanks for taking time to find my bugs!
Hi @danfickle
Now code works better. 😄
I've found another issue unfortunately. I've added to your test issue-429-break-word-extra CSS code:
body { text-align: center; }.
The result is:
The bug as well exists with text-align: right and justify .
Thanks again @mndzielski, I hope take 3 is finally correct!
This feature will be in the next release.