<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><code>hyphens</code> and in-word breaking properties</title>
<style>
div{
width:500px;
border:1px solid;
margin-bottom:2em;
hyphens:auto;
}
.one{
overflow-wrap:break-word;
}
.one:before{
content:"try to use only hyphens.you will see hyphenation + long-word breaking effect.imagine hyphens property as overflow-wrap but inserts hypenation glyphs as well.";
display:block;
margin-bottom:1em;
display:block;
margin-bottom:1em;
color:blue;
padding:5px;
font-weight:bold;
border-bottom:1px solid red;
}
.two{
word-break:break-all;
}
.two:before{
content:"NOTE:break-all will stop hyphenation.however keep-all will cause hyphenation to happen.the reason is because text will return to normal state and hyphenation will cause to break long words and insert hyphenation glyphs (-).similar to the case above.";
display:block;
margin-bottom:1em;
color:blue;
padding:5px;
font-weight:bold;
border-bottom:1px solid red;
}
</style>
</head>
<body>
<div class="one" lang="de">
Grundstücksverkehrsgenehmigungszuständigkitsübertragungsverordnung
Donaudampfschifffahrtsgesellschaftsraddampferkapitänskajütentürsicherheitsschlüssel
Kraftfahrzeug-Haftpflichtversicherung
Donau-Dampfschifffahrtsgesellschaft
Rhein-Main-Donau-Großschifffahrtsweg
Arbeiterunfallversicherungsgesetz
Bundesausbildungsförderungsgesetz
Straßenverkehrs-Zulassungs-Ordnung
Behindertengleichstellungsgesetz
Steuervergünstigungsabbaugesetz
Nahrungsmittelunverträglichkeit
Lebensversicherungsgesellschaft
</div>
<div class="two" lang="de">
Grundstücksverkehrsgenehmigungszuständigkitsübertragungsverordnung
Donaudampfschifffahrtsgesellschaftsraddampferkapitänskajütentürsicherheitsschlüssel
Kraftfahrzeug-Haftpflichtversicherung
Donau-Dampfschifffahrtsgesellschaft
Rhein-Main-Donau-Großschifffahrtsweg
Arbeiterunfallversicherungsgesetz
Bundesausbildungsförderungsgesetz
Straßenverkehrs-Zulassungs-Ordnung
Behindertengleichstellungsgesetz
Steuervergünstigungsabbaugesetz
Nahrungsmittelunverträglichkeit
Lebensversicherungsgesellschaft
</div>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.