Forcer le passage à la ligne pour une longue chaîne de caractères avec le html et css

Published: 18 mai 2017

DMCA.com Protection Status

Dans le cas d'un texte dont les mots sont séparés par des espaces, le passage à la ligne est automatique contrairement à une longue chaîne de caractères. Pour forcer le passage à la ligne pour une longue chaîne de caractères on peut utiliser word-wrap:break-word; comme dans cet exemple:

Forcer le passage à la ligne pour une longue chaîne de caractères avec le html et css Forcer le passage à la ligne pour une longue chaîne de caractères avec le html et css
Forcer le passage à la ligne pour une longue chaîne de caractères avec le html et css

<!DOCTYPE html>
<html>
<head>

<title>Hello World</title>

<style>
#test {
  width: 400px;
  word-wrap:break-word;
  border: 3px solid black;
}
</style>

</head>
<body>

<div id="test">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in tellus id augue 
malesuada faucibus. Morbi at suscipit est. Nulla fringilla hendrerit eros in viverra. 
Donec maximus nisi sed nulla pretium pulvinar. Vestibulum lacinia lorem id metus bibendum 
elementum. In hac habitasse platea dictumst. Aenean viverra bibendum nisi sit amet 
placerat. Sed tristique volutpat ipsum, sed ultrices nulla hendrerit id. Pellentesque 
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec 
quis dolor mattis, congue sem vitae, vulputate lectus.
</div>

<br><br>

<div id="test">
looooooooooooooonnnnnnnnnnnnnnnnnnnnnnnnnnnngWoooooooooooooooooooordddddddddddd
</div>

</body>
</html>

Références