Affiche une chaîne de caractères
Découvrez comment utiliser la propriété line-break en CSS pour contrôler comment les lignes sont coupées lorsqu'un élément dépasse la largeur de son conteneur.
Apprenez également à utiliser la syntaxe générale pour utiliser cette propriété
La propriété line-break en CSS permet de contrôler comment les lignes sont coupées lorsqu'un élément dépasse la largeur de son conteneur.
La propriété line-break peut prendre les valeurs suivantes :
La syntaxe générale pour utiliser la propriété line-break est la suivante :
nom_de_l'élément{
line-break: valeur;
}
Où "nom_de_l'élément" est le nom de l'élément HTML sur lequel vous voulez utiliser la propriété line-break, et "valeur" est la valeur souhaitée (normal, strict, anywhere).
La propriété line-break est compatible avec les navigateurs modernes, mais sa prise en charge peut varier en fonction des navigateurs.
| Valeurs par défaut | normal |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | document.element.style.lineBreak = "valeur"; |
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>CSS la propriété line-break </title>
<style>
.word {
width: 200px;
line-break: anywhere;
}
</style>
</head>
<body>
<p class="word">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quam adipiscing vitae proin sagittis nisl. Erat imperdiet sed euismod nisi porta lorem. Et tortor consequat id porta. Egestas congue quisque egestas diam in arcu cursus. Quis viverra nibh cras pulvinar. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Lorem mollis aliquam ut porttitor. Leo duis ut diam quam nulla porttitor massa id neque. Non quam lacus suspendisse faucibus interdum posuere lorem ipsum. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</body>
</html>
Voici quelques astuces et conseils pour utiliser la propriété CSS line-break :