In this code, hyphens don't seem to work properly:
.container {
width: 100px;
background: olive;
overflow-wrap: break-word;
hyphens: auto;
margin-bottom: 10px;
padding: 0px 15px;
box-sizing: border-box;
}
<html lang="en">
<div class="container">
Rozplombovani dlazdice
</div>
<div class="container">
fadsafweafewfsdafdsafsdfadsffaweae
</div>
</html>
The first .container
breaks word, but hyphen is missing.
In the second .container
, the text breaks line in four places, and four of them get a hyphen, but one of them doesn't
What is going on there?