oujood.com

Comment utiliser la propriété line-break en CSS

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é

chercher |

Définition et utilisation de la propriété line-break

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 :

  • normal : utilise les règles de coupure de ligne par défaut.
  • strict : n'autorise pas la coupure de mots.
  • anywhere : autorise la coupure de mots.
  • loose : autorise la coupure de mots, mais préfère ne pas couper les mots courts.
  • default : Cette valeur est équivalente à la valeur "normal"
  • strict : Cette valeur est équivalente à la valeur "strict"
  • break-all : autorise la coupure de mots, mais préfère couper les mots courts.

Syntaxe générale

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).

Compatibilité navigateur

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éfautnormal
Inherited: non
Animable : non En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: document.element.style.lineBreak = "valeur";

Exemple complet html et css pour la propriété cs line-break

      Copier le code

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

Conseils et astuces pour utiliser la propriété CSS line-break

Voici quelques astuces et conseils pour utiliser la propriété CSS line-break :

  • 1- Utilisez la propriété white-space en combinaison avec line-break pour contrôler la façon dont les espaces et les retours à la ligne sont gérés dans votre texte.
  • 2- Utilisez la valeur normal pour la propriété line-break pour que les navigateurs utilisent leur comportement par défaut pour gérer les sauts de ligne.
  • 3- Utilisez la valeur strict pour empêcher les navigateurs de casser les mots à la fin d'une ligne, ce qui peut être utile pour les textes en langue étrangère ou pour les mots qui ne peuvent pas être coupés.
  • 4- Utilisez la valeur loose pour autoriser les navigateurs à casser les mots à la fin d'une ligne si nécessaire pour éviter les débordements.
  • 5- N'oubliez pas que line-break n'est pas pris en charge par tous les navigateurs, donc vérifiez que vous utilisez des propriétés de remplacement pour les navigateurs qui ne prennent pas en charge cette propriété.




Voir aussi nos tutoriel :

Balise universelle div

Définit une section dans un document

Détermine si une variable est de type nombre entier

 Détermine si une variable est de type nombre entier

Obtenir des information d’un fichier

Manipulation de fichiers : Obtenir des information d’un fichier