6 / 11

Demo: hyphenation

Demo HTML Source CSS Source MoreCSS Source


Example 01: Automatic hyphenation in three languages.

German

Der Weltraum, unendliche Weiten. Wir schreiben das Jahr 2020. Dies sind die Abenteuer des Raumschiffs Enterprise, das mit seiner 400 Mann starken Besatzung 5 Jahre lang unterwegs ist, um neue Welten zu erforschen, neues Leben und neue Zivilisationen. Viele Lichtjahre von der Erde entfernt, dringt die Enterprise in Galaxien vor, die nie ein Mensch zuvor gesehen hat.

English

Space, the Final Frontier. These are the voyages of the starship Enterprise. Its five-year mission: To explore strange new worlds. To seek out new life and new civilizations. To boldly go where no man has gone before.

French

Espace, frontière de l’infini vers laquelle voyage notre vaisseau spatial. Sa mission de cinq ans: explorer de nouveaux mondes étranges, découvrir de nouvelles vies, d’autres civilisations et au mépris du danger, avancer vers l’inconnu.
<!-- EXAMPLE 01 -->

<h3>Example 01: Automatic hyphenation in three languages.</h3>

<table>
	<tr>
		<td class="german">
			<h4>German</h4>
			Der Weltraum, unendliche Weiten. Wir schreiben das Jahr 2020. Dies sind die Abenteuer des Raumschiffs Enterprise, 
			das mit seiner 400 Mann starken Besatzung 5 Jahre lang unterwegs ist, um neue Welten zu erforschen, neues Leben 
			und neue Zivilisationen. Viele Lichtjahre von der Erde entfernt, dringt die Enterprise in Galaxien vor, die nie 
			ein Mensch zuvor gesehen hat.
		</td>
		
		<td class="english">
			<h4>English</h4>
			Space, the Final Frontier. These are the voyages of the starship Enterprise. Its five-year mission: To explore 
			strange new worlds. To seek out new life and new civilizations. To boldly go where no man has gone before.
		</td>
		
		<td class="french">
			<h4>French</h4>
			Espace, frontière de l’infini vers laquelle voyage notre vaisseau spatial. Sa mission de cinq ans: explorer de 
			nouveaux mondes étranges, découvrir de nouvelles vies, d’autres civilisations et au mépris du danger, avancer 
			vers l’inconnu.
		</td>
	</tr>
</table>
/* EXAMPLE 01 */

.german, .english, .french {
	width: 250px;
	margin-bottom: 25px;
	text-align: justify;
	font-style: italic;
	font-size: 15px;
}
/* EXAMPLE 01 */

td.german {
	hyphenation: german;
	hyphenation-restrict: none;
}
 
td.english {
	hyphenation: english;
	hyphenation-restrict: none;
}
 
td.french {
	hyphenation: french;
	hyphenation-restrict: none;
}

← Documentation