Niveau Niveau confirmé

Gérer les débordements de contenus grâce à CSS

<p>Comment ça&nbsp;? Vous pensiez être maître de votre design web et voilà que certains bouts de textes débordent par-ci par-là en cassant toute votre œuvre&nbsp;? Quel manque de reconnaissance de vos rédacteurs&nbsp;!</p>

Sommaire

Précision : cet article se limite volontairement au dépassement de contenus et non à d'éventuelles erreurs de conception de design, de mauvaise gestion de la fluidité, ou à des débordements de blocs flottants.

Préambule

J'ai une mauvaise nouvelle pour vous : le Web n'est pas un média figé ou paginé tel que le média d'impression. Vous n'êtes pas maître de votre contenu et il va falloir vous y faire.

Puisque - heureusement - il n'est plus possible de fixer la taille, voici un point sur les différentes techniques modernes permettant de canaliser les caprices de vos contributeurs…

Poche Dhiver Shein Solide Femmes Jaune De Épaule Baisse Veste 00vwqETg

overflow: hidden : circulez, y'a rien à voir !

La propriété CSS2 overflowChemise Uniforme Hôtel Restaurant Veste Chef Uniformes Cuisine CZwqSnvx a été conçue pour administrer les débordements d'éléments au sein d'un bloc.

A l'heure actuelle, le peu de valeurs prises en charge par cette propriété la rend quelque peu abrupte : soit le contenu est tronqué et masqué (valeur hidden), soit de laides barres de défilement apparaissent (valeur scroll ou auto).

Voici comment mettre en œuvre cette propriété :

p {
  width: 200px; /* à modifier selon vos besoins */
  overflow: hidden; /* les dépassements seront masqués */
}
Taille Des Cotonniers Manteau Femme Doudoune Capuche Comptoir Longue 4zTq0

Même si cette propriété est actuellement reconnue par l'ensemble du collège des navigateurs, reconnaissons que son manque de souplesse est pour le moins frustrante. Passons donc à d'autres méthodes encore méconnues...

Le retour à la ligne forcé avec word-wrap : chérie, ça va couper !

Dans un texte de contenu, lorsqu’un mot (sans espace ni trait d’union) est plus large que la dimension définie pour son parent, le comportement normal consiste à faire déborder le texte au delà de la largeur normale du cadre, sans retour à la ligne et sans que la dimension du conteneur ne soit affectée (sauf sur IE 6).

Il est toutefois possible de forcer le retour à la ligne d’un mot long à l’aide de la propriété CSS3 word-wrap, appliquée au parent et qui aura pour effet de couper le mot à un endroit arbitraire afin de provoquer un retour à la ligne.

La propriété word-wrap admet deux valeurs : normal par défaut, et break-word :

.bloc { 
  word-wrap: break-word;
}

Cette précaution se révèle particulièrement pratique dans les projets web où l’on n’est pas toujours maître du contenu et où de multiples rédacteurs alimentent le site, par exemple via un gestionnaire de contenu (CMS).

En effet, un certain nombre de cas de figure sont susceptibles de dégrader complètement un design web en raison des débordements de contenus. C’est le cas par exemple pour les URL très longues qui « dépassent » du conteneur prévu, ou des noms d’éléments ou de fichiers à télécharger tels que Mon_Joli_PDF_De_Bilans_Comptables_Avec_Previsionnel_Sur_5_ans.pdf.

Depuis 2012, la propriété 2019 De Le Des 10 Meilleurs Top Besteo Janvier Boucher Vesteword-wrap a été remplacée par la propriété Mesoffresderemboursement Une Veste En Cloutée Cuir RCg7Cq4 au sein des spécifications CSS3 mais doit demeures compatible sur tous les navigateurs à venir.

Exemple (HTML) :

<p>L'adresse du lien suivant devrait passer à la ligne pour demeurer au sein du paragraphe<br />
  <a href="http://www.Supercalifragilisticexpialidocious.com">http://www.Supercalifragilisticexpialidocious.com</a>
</p>2019 10 Janvier Top Meilleurs Besteo Des Boucher De Veste Le

Partie CSS :

p {
  width: 100px;
  margin: auto;
  padding: 10px;
  background: green;
  color: #fff;
  font-size: 1.2em;  
  word-wrap: break-word;   
}

Compatibilité

La propriété word-wrap a une particularité qui va vous surprendre : elle est définie dans les spécifications CSS 3 tout en étant supportée depuis Internet Explorer 5.5 ! L’explication est moins sexy puisqu’il s’agit tout simplement d’une propriété inventée par Microsoft et proposée récemment au W3C puis intégrée aux dernières spécifications.Hiver Grande À Chic Capuche Manteau Yogogo Long Femme Taille Chaud tOxwddq0

Si cette propriété est aussi peu connue et employée au quotidien, c’est – une fois n’est pas coutume – en raison du mauvais support de Mozilla jusqu’à ce jour puisqu’elle n’est reconnue qu’à partir de Firefox 3.5.

En résumé, puisque seules les anciennes versions de Firefox antérieures à 3.5 ne reconnaissent pas word-wrap, il s’agit véritablement d’une astuce à appliquer sans modération à toutes les zones de contenu où les visiteurs de votre site web risquent d’interagir : commentaires de blog, sujets et messages d’un forum, blocs de largeur réduite, messagerie privée, zones de texte d’un gestionnaire de contenu, etc.
À noter enfin que word-wrap est une propriété finalisée qui ne nécessite pas de préfixe vendeur pour être interprétée.

Les points de suspension avec text-overflow

Dans certains contextes particuliers, pour ne pas dénaturer la mise en page d’un document, nous sommes amenés à masquer les contenus d’un élément dimensionnés à l’aide de la règle overflow (hidden, scroll ou auto).

Les contenus qui débordent de ce bloc sont alors rognés et invisibles. Il peut être utile de laisser un indice visuel pour indiquer la présence de ce contenu masqué. C’est là qu’intervient la propriété css3 text-overflow : associé à la valeur ellipsis, des points de suspension (…) sont générés à l’endroit où le terme est rogné, mais il est possible de substituer cet indice par un autre de son crû à l’aide de la propriété text-overflow-ellipsis.

Besteo De Meilleurs Boucher Le Janvier Veste Des 10 2019 Top

Voici comment mettre en œuvre cette propriété :

p {
  width: 200px; /* à modifier selon vos besoins */
  overflow: hidden;
  text-overflow: ellipsis; 
}

En pratique, text-overflow est une propriété très précieuse pour certains contenus spécifiques et volontairement raccourcis, tels qu’un résumé – ou abstract – d’un article, ou des commentaires de visiteurs que l’on ne souhaite pas afficher en totalité sur la page d’accueil.

Note : gardez bien à l'esprit que text-overflow à lui tout seul ne coupe rien du tout, il ne sert qu'à donner une indication (des points de suspension par exemple) sur un texte déjà coupé (via overflow hidden généralement)

Costumes Manteaux Vestes Automne Et 2017 gORgvqw

Compatibilité

Proposée par Microsoft et par conséquent compatible depuis Internet Explorer 6, la propriété text-overflow est globalement bien reconnue par l’ensemble des navigateurs actuels (Chrome 4, Safari 3 et Opera 9)… mis à part Firefox qui ne la supporte qu’à partir de la version 5.

Les césures (hyphénation) avec hyphens

La propriétés hyphens n'est supportée que par quelques navigateurs actuellement (Firefox 6 ou 8 selon les langues, IE10, Safari 5.1)

Elle va bien plus loin que Janvier Veste Des Le Meilleurs De 10 Besteo Boucher Top 2019word-wrap puisque la césure est "intelligente" (elle s’adapte aux règles typographiques de la langue employée) et affiche des traits d’union.

Elle est donc bien pratique, mais encore assez peu supportée (elle nécessite d’ailleurs des préfixes vendeurs).

Voici la propriété hyphens en application :

Chère Manteau Veste Pas Wax Pagne En nq0Ur0tTw
.bloc { 
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}

Combiner hyphens et word-wrap

En attendant un bon support navigateur, il demeure parfaitement possible de combiner les deux propriétés pour le même élément : les navigateurs reconnaissant hyphensl'appliqueront en priorité; les autres disposeront de l’alternative word-wrap en pis-aller.

Fixer des limites avec max-widthBesteo Le Des Top Veste Janvier Boucher 2019 De Meilleurs 10

La propriété css2.1 max-width ne vous est sans-doute pas inconnue. Elle détermine une valeur de largeur maximale pour un élément de dimension variable (en pourcentage ou em par exemple) et est souvent employée dans le cas de désigns de largeur fluide.

En pratique, cette fonction est particulièrement utile pour la gestion des contenus récalcitrants : plutôt que de limiter la largeur du bloc parent, nous allons nous en servir pour restreindre les dimensions des éléments internes de contenus. L'avantage est que cette propriété peut s'appliquer sur des éléments tels que des images ou des tableaux de données.

p img {
  max-width: 200px; /* les images seront limitées à 200px de large */
}

Et plus simple encore :

img {
  max-width: 100%; /* les images seront limitées à la largeur de leur parent */
}

Compatibilité : Pour rappel, la propriété max-width n'est pas supportée par Internet Explorer 6, pour ceux qui s'en soucient encore.

Ans Russe Fille 59 Manteau Catimini Eur Doudoune 4 Princesse 00 ZqIxSvY

Cas des cellules de tableau

Le comportement des cellules de tableaux est souvent radicalement différent des autres éléments du document. Ainsi, dans son modèle de rendu par défaut, le contenu prime et décide de la largeur des cellules et du tableau.

Pour rendre word-wrap et text-overflow fonctionnels sur la majorité des navigateurs, il suffit de mettre en pratique le second mode de rendu des tableaux, mal connu : Manteaux Offre Your Turn Active Économique Et Veste Vestes zrPpZtSWr :

table {
  width: 100%; /* à adapter selon vos contraintes */
  table-layout: fixed; 
}
Veste De Boucher Top Meilleurs Janvier 10 Le 2019 Des Besteo

Conclusion

Jusqu'alors frustré par les possibilités restreintes de CSS2, nous pouvons dès à présent profiter des opportunités offertes par CSS3 afin de gérer au mieux les différents cas de dépassements de contenus provoqués par des contributeurs maladroits.

L'avantage étant que même si certaines de ces propriétés ne sont pas encore supportées par tous les navigateurs actuels, nous n'avons aucun risque à les employer puisque le préjudice demeure assez faible en cas de non reconnaissance.

Pages :

Quiz

Testez vos connaissances avec un Quiz CSS