oujood.com

Comment empêcher les ruptures de colonne dans un élément? : la propriété css break-inside

La propriété break-inside indique si un saut de page, un saut de colonne ou un saut de région doit se produire ou non à l'intérieur de l'élément spécifié.
La propriété break-inside étend la propriété CSS2 page-break-inside.

chercher |

Définition et utilisation da la propriété css break-inside

Avec break-inside, le navigateur peut éviter les ruptures dans les images, les extraits de code, les tableaux et les listes.

Nous pouvons empêcher la rupture d'une colonne dans un élément en utilisant la propriété CSS break-inside.
La propriété break-inside en CSS est utilisée pour spécifier comment la colonne se casse à l'intérieur de l'élément. Parfois, le contenu d'un élément est coincé entre les colonnes. Pour empêcher la rupture de la colonne, nous pouvons utiliser la propriété break-inside.

La Syntaxe CSS
break-inside: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|
column|left|page|recto|region|right|verso|initial|inherit;
Valeurs par défautauto
Inherited: non
Animable : non En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.breakInside="always"

Prise en charge de la propriété css dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion5010651037

Valeurs de la propriété break-inside

auto Par défaut. Saut de page/colonne/région automatique à l'intérieur de l'élément
avoid Éviter un saut de page/colonne/région à l'intérieur de l'élément
avoid-column Éviter un saut de colonne dans l'élément
avoid-page Éviter un saut de page dans l'élément
avoid-region Éviter un saut de région à l'intérieur de l'élément
initial Définit cette propriété à sa valeur par défaut.
inherit Hérite cette propriété de son élément parent.

Exemple : Cet exemple permet d'éviter les ruptures de colonne dans un élément.

Exemple       Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>La propriété css break-inside</title>
     <style>
        .ojd {
            -moz-column-count: 3;
            column-count: 3;
            width: 30em;
        }
          
        .ojd li {
            -webkit-column-break-inside: avoid;
        }
    </style>
</head>
  
<body>
    <h1> www.oujood.com </h1>
    <div class='ojd'>
        <ul>
            <li>oujood 1</li>
            <li>oujood 2</li>
            <li>Lorem ipsum dolor sit amet,
			consectetur adipiscing elit, 
			sed do eiusmod tempor incididunt 
			ut labore et dolore magna aliqua. </li>
            <li>oujood 3</li>
            <li>oujood.com pour apprendre</li>
            <li>oujood 4</li>
        </ul>
    </div>
    </body>
</html>

Pour voir l’effet de la propriété break-inside, éxecuter l’exemple ci-dessus sant cette propriété.

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web