Hyphenation/ Silbentrennung

Test Umbruchmöglichkeit

by Fiddel

HTML

<div lang="de">
<h1>
mit &amp;shy;
</h1>
<p>Über die Regel&shy;energi&shy;eaus&shy;schrei&shy;bungs&shy;platt&shy;form der NetConnect Germany können prä&shy;quali&shy;fi&shy;zier&shy;te Regel&shy;energie&shy;anbieter im Markt&shy;gebiet NetConnect Germany am bi&shy;la&shy;ter&shy;alen Regel&shy;energie&shy;markt im Markt&shy;gebiet teil&shy;nehmen. Regel&shy;energi&shy;eaus&shy;schrei&shy;bungs&shy;platt&shy;form Regel&shy;energi&shy;eaus&shy;schrei&shy;bungs&shy;platt&shy;form Regel&shy;energi&shy;eaus&shy;schrei&shy;bungs&shy;platt&shy;form</p>
</div>

<div lang="de" class="test1">
<h1>
ohne &amp;shy;, <br>word-wrap: break-word
</h1>
<p>Über die Regelenergieausschreibungsplattform der NetConnect Germany können präqualifizierte Regelenergieanbieter im Marktgebiet NetConnect Germany am bilateralen Regelenergiemarkt im Marktgebiet teilnehmen. Regelenergieausschreibungsplattform Regelenergieausschreibungsplattform Regelenergieausschreibungsplattform</p>
</div>

<div lang="de" class="test2">
<h1>
ohne &amp;shy;, <br>hyphens: auto;
</h1>
<p>Über die Regelenergieausschreibungsplattform der NetConnect Germany können präqualifizierte Regelenergieanbieter im Marktgebiet NetConnect Germany am bilateralen Regelenergiemarkt im Marktgebiet teilnehmen. Regelenergieausschreibungsplattform Regelenergieausschreibungsplattform Regelenergieausschreibungsplattform</p>
</div>

CSS

div {

    padding: 10px;
    width: 180px;
    margin: 0 6rem 0 0;
    float:left;
    outline:1px dashed red;
}
p {
    outline: 1px solid black;
    margin: 0 0 1rem;
}
h1 {font:normal .88rem/1 Arial,Helvetica,sans-serif}
div.test1 {
    word-wrap: break-word;
}
div.test2 {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}