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

Active 18 mai 2017    /    Viewed 2657    /    Comments 0    /    Edit


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

<!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

Liens Site
CSS: how can I force a long string (without any blank) to be wrapped in XUL and/or HTML stackoverflow
wordwrap a very long string stackoverflow
Set a div width, align div center and text align left stackoverflow
How to add border/outline/stroke to SVG elements in CSS? stackoverflow


Card image cap
profile-image
Daidalos

Hi, I am Ben.

I have developed this web site from scratch with Django to share with everyone my notes. If you have any ideas or suggestions to improve the site, let me know ! (you can contact me using the form in the welcome page). Thanks!