Points CSS si cela ne convient pas. Couper du texte sur une ou plusieurs lignes à la hauteur en ajoutant des points de suspension

Dans certains cas, le contenu d'un bloc apparaît en dehors des limites de l'élément, le chevauchant. Pour contrôler le comportement des éléments au niveau du bloc, utilisez la propriété overflow, qui détermine la manière dont le contenu qui s'étend à l'extérieur du bloc doit être affiché.

À l'aide de la propriété clip, vous pouvez recadrer un élément aux dimensions spécifiées.

1. Propriété de débordement

Le contenu des éléments de bloc peut déborder d'un bloc lorsque celui-ci a une hauteur et/ou une largeur explicite. Sans spécifier de hauteur, le bloc s'étirera pour s'adapter au contenu à moins que le bloc ne soit positionné à la position : absolue ; ou poste : fixe ; . Le texte peut déborder du bloc en hauteur, les images en hauteur et en largeur.

2. Propriété Overflow-x

La propriété spécifie comment le bord droit du contenu à l'intérieur du bloc sera coupé en cas de débordement.

Syntaxe:

Div ( débordement-x : caché ; )

3. Propriété de débordement

La propriété spécifie comment le bord inférieur du contenu à l'intérieur du bloc sera coupé s'il déborde.

Syntaxe:

Div (débordement-y : caché ; )

4. Propriété du clip

La propriété détermine la quantité de l'élément qui sera visible. La partie de l'élément qui reste visible après le découpage est appelée la zone de découpage. Le découpage est appliqué à un élément initialement entièrement visible. La propriété s'applique aux éléments dont la propriété position est définie sur absolue ou fixe .

Il existe un texte de longueur arbitraire qui doit être affiché à l'intérieur d'un bloc de hauteur et de largeur fixes. Dans ce cas, si le texte ne rentre pas complètement, un fragment de texte qui rentre complètement dans le bloc donné doit être affiché, après quoi des points de suspension sont définis.

Cette tâche est assez courante, mais en même temps elle n'est pas aussi anodine qu'il y paraît.

Option pour le texte sur une seule ligne en CSS

Dans ce cas, vous pouvez utiliser la propriété text-overflow: ellipsis. Dans ce cas, le conteneur doit avoir la propriété débordementégal caché ou agrafe

Bloc (largeur : 250 px ; espace blanc : nowrap ; débordement : caché ; débordement de texte : points de suspension ; )

Option pour le texte multiligne en CSS

La première façon de découper du texte multiligne consiste à utiliser Propriétés CSS appliquer des pseudo-éléments :avant Et :après. Commençons par le balisage HTML

Et maintenant les propriétés elles-mêmes

Box ( débordement : caché ; hauteur : 200px ; largeur : 300px ; hauteur de ligne : 25px ; ) .box :before ( contenu : "" ; float : gauche ; largeur : 5px ; hauteur : 200px ; ) .box > * :first -child ( float : droite ; largeur : 100% ; margin-left : -5px ; ) .box :after ( contenu : "\02026" ; box-sizing : content-box ; float : droite ; position : relative ; top : -25px ; largeur : 3em ; padding-right : 5px ; background-size : 100% 100% (255, 255, 255, 0), blanc 50%, blanc) ;

Une autre façon consiste à utiliser la propriété column-width, avec laquelle nous définissons la largeur de colonne pour le texte multiligne. Cependant, lors de l'utilisation de cette méthode, il ne sera pas possible de définir des points de suspension à la fin. HTML :

Bloc ( débordement : caché ; hauteur : 200px ; largeur : 300px ; ) .block__inner ( -webkit-column-width : 150px ; -moz-column-width : 150px ; colonne-width : 150px ; hauteur : 100% ; )

Il existe une troisième façon de résoudre le texte multiligne en utilisant CSS pour les navigateurs Kit Web. Dans celui-ci, nous devrons utiliser plusieurs propriétés spécifiques avec le préfixe -kit Web. Le principal est -webkit-line-clamp qui permet de spécifier le nombre de lignes à afficher dans un bloc. La solution est belle mais plutôt limitée en raison de son fonctionnement dans un groupe limité de navigateurs

Bloquer ( overflow : caché ; text-overflow : points de suspension ; display : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : vertical ; )

Option pour le texte multiligne en JavaScript

Ici, un bloc invisible supplémentaire est utilisé, dans lequel notre texte est initialement placé, après quoi il est supprimé un caractère à la fois jusqu'à ce que la hauteur de ce bloc devienne inférieure ou égale à la hauteur le bloc souhaité. Et à la fin, le texte est déplacé vers le bloc d'origine.

bloc var = document. querySelector(".block"), texte = bloc. innerHTML, clone = document. createElement("div");

cloner style. position = "absolu" ;

(function ($ ) ( var truncate = function (el ) ( var text = el . text (), height = el . height (), clone = el . clone (); clone . css (( position : "absolu" , visibilité : "caché" , hauteur : "auto" )); ( clone . text ( text . substring ( 0 , l ) + "..." ); el . text ( clone . remove ( ) ); ( return this . chacun (fonction () ( tronqué ( $ ( this )); ) )( jQuery ));

Problème

Prendre des raccourcis ne consiste pas seulement à moyen rapide atteindre l'objectif, mais aussi une option de style populaire dans la conception d'impression et la conception Web. Il s'agit le plus souvent de couper un ou plusieurs coins du conteneur selon un angle de 45°. DANS dernièrement, en raison du fait que le skeuomorphisme a commencé à perdre du terrain au profit du design plat, cet effet est particulièrement populaire. Lorsque les coins sont coupés d'un seul côté et que chaque coin occupe 50 % de la hauteur de l'élément, cela crée une forme en forme de flèche, qui est également souvent utilisée dans la conception de boutons et d'éléments de navigation dans le fil d'Ariane.

Cependant, CSS ne dispose toujours pas de suffisamment d'outils pour créer cet effet avec des one-liners simples et directs. Pour cette raison, de nombreux développeurs ont tendance à utiliser images d'arrière-plan: Soit recouvrir les coins coupés avec des triangles (sur un fond uni), soit créer l'intégralité du fond à l'aide d'une ou plusieurs images dont les coins sont déjà coupés. De toute évidence, ces méthodes sont totalement rigides, difficiles à maintenir et augmentent la latence en raison des requêtes HTTP supplémentaires et de la taille globale des fichiers du site Web.

Un exemple de site Web où le coin coupé (en bas à gauche du champ semi-transparent Find & Book) s'intègre parfaitement dans le design

Solution

Un solution possible offrez-nous les tout-puissants dégradés CSS. Disons que nous ne voulons qu'un seul coin coupé, disons le coin inférieur droit. L'astuce consiste à tirer parti de la capacité des dégradés à prendre la direction de l'angle (par exemple 45 degrés) et la position des limites de transition de couleur en valeurs absolues, qui ne changent pas lorsque les dimensions globales de l'élément auquel le l’arrière-plan appartient au changement. De ce qui précède, il s'ensuit qu'un seul gradient linéaire nous suffira.

Nous ajouterons une bordure de fondu transparente pour créer le coin coupé, ainsi qu'une autre bordure de fondu à la même position, mais avec une couleur qui correspond à l'arrière-plan. Le code CSS sera le suivant (pour un coin de 15px) :

arrière-plan : #58a ;
arrière-plan: dégradé linéaire (-45 degrés, transparent 15 pixels, # 58a 0);

Simple, n'est-ce pas ? Vous pouvez voir le résultat sur la figure.

Techniquement, nous n'avons même pas besoin de la première annonce. Nous l'avons simplement ajouté comme solution de contournement : si les dégradés CSS ne sont pas pris en charge, alors la deuxième déclaration sera ignorée, nous obtiendrons donc au moins un arrière-plan de couleur unie. Supposons maintenant que nous ayons besoin de deux coins coupés, disons les deux coins inférieurs. Cela ne peut pas être fait avec un seul dégradé, nous en aurons donc besoin de deux. Votre première pensée pourrait ressembler à ceci :

arrière-plan : #58a ;
arrière-plan : dégradé linéaire (-45 degrés, transparent 15 pixels, # 58a 0), dégradé linéaire (45 degrés, transparent 15 pixels, # 655 0);

Cependant, cela ne fonctionne pas. Par défaut, les deux dégradés occupent toute la surface de l'élément, ils se masquent donc mutuellement. Nous devons les réduire en limitant chacun d'eux à la moitié de l'élément en utilisant background-size :
arrière-plan : #58a ;

taille de l'arrière-plan : 50 % 100 % ;

Vous pouvez voir le résultat sur la figure.

Même si nous avons appliqué background-size , les dégradés se chevauchent toujours. La raison est que nous avons oublié de désactiver la répétition d'arrière-plan, donc chacun des arrière-plans est répété deux fois. Par conséquent, l’un des fonds occulte encore l’autre, mais cette fois par répétition. Nouvelle version le code ressemble à ceci :
arrière-plan : #58a ;
arrière-plan : dégradé linéaire (-45 degrés, transparent 15 pixels, # 58a 0) à droite, dégradé linéaire (45 degrés, transparent 15 pixels, # 655 0) à gauche ;
taille de l'arrière-plan : 50 % 100 % ;

Vous pouvez voir le résultat sur la photo et être sûr qu'il est enfin là ! - travaux! Vous avez probablement déjà deviné comment appliquer cet effet aux quatre coins. Vous aurez besoin de quatre dégradés et d'un code similaire au suivant :

arrière-plan : #58a ;
arrière-plan : dégradé linéaire (135 degrés, transparent 15 px, #58a 0) en haut à gauche,

dégradé linéaire (-135deg, transparent 15px, #655 0) en haut à droite,

dégradé linéaire (-45deg, transparent 15px, #58a 0) en bas à droite,

dégradé linéaire (45 degrés, transparent 15 pixels, #655 0) en bas à gauche ;
taille de l'arrière-plan : 50 % 50 % ;
répétition d'arrière-plan : pas de répétition ;

CONSEIL
Nous avons utilisé différentes couleurs (#58a et #655) pour faciliter le débogage. En pratique, les deux dégradés seront de la même couleur.
Mais le problème avec le code précédent est qu’il est difficile à maintenir. Cinq modifications sont nécessaires pour modifier la couleur d'arrière-plan et quatre pour modifier la valeur de l'angle. Un mixin créé à l'aide d'un préprocesseur pourrait réduire le nombre de répétitions. Voici à quoi ressemblerait ce code dans SCSS :
SCSS
@mixin coins biseautés ($bg,
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) (
arrière-plan : $bg ;
arrière-plan:
dégradé linéaire (135 degrés, transparent $tl, $bg 0)
en haut à gauche,
dégradé linéaire (225 degrés, transparent $tr, $bg 0)
en haut à droite,
dégradé linéaire (-45deg, transparent $br, $bg 0)
en bas à droite,
dégradé linéaire (45 degrés, transparent $ bl, $ bg 0)
en bas à gauche ;
taille de l'arrière-plan : 50 % 50 % ;
répétition d'arrière-plan : pas de répétition ;
}

Il peut ensuite être appelé en cas de besoin, comme indiqué ci-dessous, avec 2 à 5 arguments :
SCSS
@include coins biseautés (#58a, 15px, 5px);
Dans cet exemple, nous nous retrouverons avec un élément dont les coins supérieur gauche et inférieur droit sont coupés de 15 pixels et ses coins supérieur droit et inférieur gauche coupés de 5 pixels, de la même manière que fonctionne border-radius lorsque nous spécifions moins de quatre valeurs. Cela est possible car nous avons également pris soin des valeurs par défaut pour les arguments dans notre mixin SCSS - et oui, ces valeurs par défaut peuvent également faire référence à d'autres arguments.
ESSAYEZ-LE VOUS-MÊME !
http://play.csssecrets.io/bevel-corners-gradients

Coins coupés incurvés

Un excellent exemple d’utilisation de coins coupés incurvés sur un site Web. http://g2geogeske.com le designer en a fait un élément central du design : ils sont présents dans la navigation, dans le contenu, et même dans le footer.
Une variante de la méthode avec des dégradés vous permet de créer des coins coupés incurvés - un effet que beaucoup appellent le « rayon de bordure intérieure » car il ressemble à une version inversée de coins arrondis. La seule différence est l'utilisation de dégradés radiaux au lieu de dégradés linéaires :
arrière-plan : #58a ;
arrière-plan : dégradé radial (cercle en haut à gauche, transparent 15px, #58a 0) en haut à gauche,

dégradé radial (cercle en haut à droite, transparent 15px, #58a 0) en haut à droite,

dégradé radial (cercle en bas à droite, transparent 15px, #58a 0) en bas à droite,

dégradé radial (cercle en bas à gauche, transparent 15px, #58a 0) en bas à gauche ;
taille de l'arrière-plan : 50 % 50 % ;
répétition d'arrière-plan : pas de répétition ;

Comme dans la technique précédente, la taille de l'angle peut être contrôlée par les positions des limites de transition de couleur, et un mixin peut rendre ce code plus adapté à une maintenance ultérieure.

ESSAYEZ-LE VOUS-MÊME !
http://play.csssecrets.io/scoop-corners

Solution avec chaîne SVG et border-image

Bien que la solution basée sur les dégradés fonctionne, elle présente quelques inconvénients :
Le code est très long et plein de répétitions. Dans le cas le plus courant, lorsque nous devons couper les quatre coins du même montant, la modification de ce montant entraîne quatre modifications du code.

De même, changer la couleur d'arrière-plan nécessite également quatre modifications, et si vous prenez en compte la solution de secours, alors les cinq ; Animer des changements dans la taille d’un coin coupé est incroyablement difficile, et dans certains navigateurs, c’est complètement impossible. Heureusement, en fonction du résultat souhaité, nous pouvons utiliser plusieurs méthodes supplémentaires. L’un d’eux concerne l’unification image-bordure avec une chaîne de code SVG dans laquelle les coins sont générés.

Savoir comment ça marche image-bordure(si vous avez besoin de rafraîchir ces connaissances dans votre mémoire, vous trouverez un indice), pouvez-vous déjà imaginer à quoi devrait ressembler celle requise ? SVG-code?

Étant donné que les dimensions globales ne sont pas importantes pour nous (border-image se chargera de la mise à l'échelle et les images SVG sont parfaitement mises à l'échelle quelle que soit leur taille - soyez bénis graphiques vectoriels!), toutes les tailles peuvent être assimilées à une afin de fonctionner avec des valeurs plus pratiques et plus courtes. La valeur du coin coupé sera égale à un, et les côtés droits seront également égaux à un. Résultat (agrandi pour une visualisation plus facile). Le code requis pour cela est indiqué ci-dessous :
bordure : 15px solide transparente ;


width=”3″ height=”3″ fill=”%2358a”>\
\
’);

Notez que la taille du pas de découpage est de 1. Cela ne signifie pas 1 pixel ; la taille réelle est déterminée par le système de coordonnées du fichier SVG (c'est pourquoi nous n'avons pas d'unités). Si nous utilisions des pourcentages, nous devrions approximer 1/3 de l'image avec une valeur fractionnaire, comme 33,34 % . Il est toujours risqué de recourir à des valeurs approximatives, car différents navigateurs Les valeurs peuvent être arrondies à différents degrés de précision. Et en respectant les unités de changement dans le système de coordonnées du fichier SVG, nous nous épargnons le mal de tête lié à tous ces arrondis.

Comme vous pouvez le constater, les coins coupés sont présents, mais il n'y a pas de fond. Il existe deux manières de résoudre ce problème : soit définir un arrière-plan, soit ajouter le mot-clé fill à la déclaration border-image afin que l'élément de tranche centrale ne soit pas supprimé. Dans notre exemple, nous préférons définir un arrière-plan distinct, puisque cette définition servira également de solution de contournement pour les navigateurs qui ne prennent pas en charge cette solution.

De plus, vous avez probablement remarqué que les coins coupés sont désormais plus petits qu'avec la technique précédente, ce qui peut prêter à confusion. Nous définissons la largeur du cadre à 15px ! La raison en est que dans la solution de dégradé, ces 15 pixels ont été mesurés le long de la ligne de dégradé, qui est perpendiculaire à la direction du dégradé. Cependant, la largeur du cadre n'est pas mesurée en diagonale, mais horizontalement/verticalement.

Sentez-vous où je veux en venir avec ça ? Oui, oui, encore une fois le théorème de Pythagore omniprésent, que nous avons activement utilisé. Le diagramme de la figure devrait rendre les choses plus claires.

En bref, pour obtenir le même résultat visuel, nous avons besoin d’une largeur de bordure 2 fois supérieure à celle que nous utiliserions dans la méthode du dégradé. DANS dans ce cas ce sera un pixel, qu'il est plus raisonnable d'approcher de 20 px, à moins que nous ne soyons confrontés à la tâche de rapprocher le plus possible la taille de la diagonale des 15 px chéris :

bordure-image : 1 url('data:image/svg+xml,\

width=”3″ height=”3″ fill=”%2358a”>\

0.2″/>\
’);
arrière-plan : #58a ;
Cependant, comme vous pouvez le constater, le résultat n’est pas tout à fait celui auquel nous nous attendions.

Où sont passés nos raccourcis minutieusement réduits ? N'aie pas peur, jeune Padawan, les coins sont toujours en place. Vous comprendrez immédiatement ce qui s'est passé si vous définissez une couleur d'arrière-plan différente, comme #655.
Comme le montre l'image ci-dessous, la raison pour laquelle nos coins ont disparu est à cause de l'arrière-plan : l'arrière-plan que nous avons défini ci-dessus les obscurcit simplement. Tout ce que nous devons faire pour éliminer cet inconvénient est d'utiliser background-clip pour empêcher l'arrière-plan de se glisser sous la zone du cadre :
bordure : 20 px solide transparente ;
bordure-image : 1 url('data:image/svg+xml,\

width=”3″ height=”3″ fill=”%2358a”>\

0.2″/>\
’);
arrière-plan : #58a ;

Maintenant, le problème est résolu et notre domaine est exactement le même qu’avant. De plus, cette fois, nous pouvons facilement modifier la taille des coins avec une seule modification : ajustez simplement la largeur du cadre. Nous pouvons même animer cet effet car border-width prend en charge l'animation !

Et changer l’arrière-plan nécessite désormais deux modifications au lieu de cinq. De plus, comme notre arrière-plan ne dépend pas de l'effet appliqué aux coins, nous pouvons lui donner un dégradé ou tout autre motif, à condition que la couleur des bords soit toujours #58a .

Par exemple, nous utilisons un dégradé radial de hsla(0,0%,100%,.2) à transparent. Il ne reste qu’un petit problème à résoudre. Si border-image n’est pas pris en charge, la solution de secours ne se limitera pas à l’absence de raccourcis. L'arrière-plan étant rogné, il y aura moins d'espace entre le bord du champ et son contenu. Afin de résoudre ce problème, nous devons définir la même couleur pour le cadre que celle que nous utilisons pour l'arrière-plan :
bordure : 20px solide #58a ;
bordure-image : 1 url('data:image/svg+xml,\

width=”3″ height=”3″ fill=”%2358a”>\
\
’);
arrière-plan : #58a ;
clip d'arrière-plan : boîte de remplissage ;

Dans les navigateurs où notre définition image-bordure est pris en charge, cette couleur sera ignorée, mais en cas d'échec de border-image, une couleur de bordure supplémentaire fournira une solution de repli plus élégante. Son seul inconvénient est qu'il augmente à trois le nombre de modifications nécessaires pour changer la couleur d'arrière-plan.
ESSAYEZ-LE VOUS-MÊME !
http://play.csssecrets.io/bevel-corners

Solution de chemin de détourage

Bien que la solution bordure-image soit très compacte et suive bien les principes DRY, elle impose certaines limites. Par exemple, notre arrière-plan doit toujours être entièrement, ou au moins le long des bords, rempli d'une couleur unie.

Que se passe-t-il si nous souhaitons utiliser un autre type d’arrière-plan, comme une texture, un motif ou un dégradé linéaire ? Il existe une autre méthode qui n'a pas de telles restrictions, même si, bien sûr, il existe certaines restrictions quant à son utilisation.

Rappelez-vous la propriété chemin de détourage du secret « Comment faire un losange » ? Les chemins de détourage CSS ont une propriété étonnante : ils vous permettent de mélanger des valeurs en pourcentage (la façon dont nous spécifions les dimensions globales d'un élément) avec des valeurs absolues, offrant une flexibilité incroyable. Par exemple, le code d'un chemin de détourage qui recadre un élément en un rectangle de 20 pixels avec des coins biseautés (mesuré horizontalement) ressemble à ceci :
arrière-plan : #58a ;
chemin de détourage : polygone (
20px 0, calcul(100% - 20px) 0, 100% 20px,
100 % calcul(100 % - 20px), calcul(100 % - 20px) 100 %,
20px 100%, 0 calcul(100% - 20px), 0 20px);
Bien que court, ce morceau de code ne suit pas les principes DRY, et cela devient l'un des plus gros problèmes si vous n'utilisez pas de préprocesseur. En fait, ce code est la meilleure illustration du principe WET de toutes les solutions CSS pures présentées dans ce livre, car il nécessite jusqu'à huit (!) modifications pour changer la taille du coin.

D'un autre côté, l'arrière-plan peut être modifié avec une seule modification, donc au moins nous l'avons. Un des avantages cette approche- le fait que nous pouvons utiliser absolument n'importe quel arrière-plan ou même recadrer des éléments de substitution tels que des images. L'illustration montre une image stylisée à l'aide de coins coupés. Aucune des méthodes précédentes ne permet d’obtenir cet effet. De plus, la propriété clip-path prend en charge l'animation, et nous pouvons animer non seulement le changement de taille d'un coin, mais également les transitions entre différentes formes.

Tout ce que vous avez à faire est d’utiliser un chemin de détourage différent. En plus d'être verbeuse et d'avoir une prise en charge limitée du navigateur, l'inconvénient de cette solution est que si nous ne nous assurons pas que le remplissage est suffisamment large, le texte sera également coupé, car le recadrage de l'élément ne prend aucun de ses composants. en compte. En revanche, la méthode du dégradé permet au texte de s'étendre simplement au-delà des coins coupés (après tout, ils ne font qu'une partie de l'arrière-plan), et la méthode de la bordure-image fonctionne de la même manière que les bordures normales : elle enveloppe le texte sur un nouveau doubler.

ESSAYEZ-LE VOUS-MÊME !
http://play.csssecrets.io/bevel-corners-clipped

LES FUTURS COINS COUPÉS
À l'avenir, nous n'aurons plus besoin de recourir aux dégradés CSS, au découpage ou au SVG pour obtenir l'effet de coins coupés. Nouvelle propriété en forme de coin, inclus dans Arrière-plans et bordures CSS niveau 4 , nous évitera ce casse-tête. Il sera utilisé pour créer l'effet de coins découpés en différentes formes en combinaison avec la propriété border-radius, qui est nécessaire pour déterminer la quantité de recadrage. Par exemple, pour décrire des coins coupés de 15 pixels sur tous les côtés de l’image, le code simple suivant suffit :

rayon de bordure : 15 px ;
forme du coin : biseau ;

Lire aussi

Vlad Merjevitch

Malgré le fait que les moniteurs de grande diagonale deviennent de plus en plus abordables et que leur résolution augmente constamment, il est parfois nécessaire d'insérer beaucoup de texte dans un espace limité. Par exemple, cela peut être nécessaire pour version mobile site ou pour une interface dans laquelle le nombre de lignes est important. Dans de tels cas, il est logique de couper les longues lignes de texte, ne laissant que le début de la phrase. De cette façon, nous amènerons l’interface sous une forme compacte et réduirons la quantité d’informations affichées. Le découpage de ligne lui-même peut être effectué côté serveur en utilisant le même PHP, mais c'est plus facile grâce à CSS, et vous pouvez toujours afficher l'intégralité du texte, par exemple lorsque vous passez le curseur de la souris dessus. Nous examinerons ensuite les méthodes permettant de couper du texte avec des ciseaux imaginaires.

En réalité, tout se résume à utiliser la propriété overflow avec la valeur Hidden . Les différences résident uniquement dans l'affichage différent de notre texte.

Utiliser le débordement

Pour que la propriété overflow s'affiche avec le texte dans toute sa splendeur, vous devez déballer le texte en utilisant un espace blanc avec la valeur nowrap . Si cela n'est pas fait, l'effet dont nous avons besoin ne se produira pas ; des traits d'union seront ajoutés au texte et l'intégralité du texte sera affichée. L'exemple 1 montre comment découper un texte long avec un ensemble spécifié de propriétés de style.

Exemple 1. débordement pour le texte

HTML5 CSS3 IE Cr Op Sa Fx

Le résultat de cet exemple est présenté sur la Fig. 1.

Riz. 1. L'apparence du texte après application de la propriété overflow

Comme le montre la figure, il y a généralement un inconvénient : il n'est pas évident que le texte ait une suite, l'utilisateur doit donc en être informé. Cela se fait généralement à l’aide d’un dégradé ou de points de suspension.

Ajouter un dégradé au texte

Pour indiquer plus clairement que le texte de droite ne se termine pas, vous pouvez superposer un dégradé allant d'une couleur transparente à la couleur d'arrière-plan (Fig. 2). Cela créera l’effet d’une dissolution progressive du texte.

Riz. 2. Texte dégradé

L'exemple 2 montre comment créer cet effet. Le style de l'élément lui-même restera pratiquement le même, mais nous ajouterons le dégradé lui-même en utilisant le pseudo-élément ::after et CSS3. Pour ce faire, nous insérons un pseudo-élément vide via la propriété content et lui appliquons un dégradé avec des préfixes différents pour les principaux navigateurs (exemple 2). La largeur du dégradé peut être facilement modifiée à l'aide de width , vous pouvez également ajuster le degré de transparence en remplaçant la valeur 0,2 par la vôtre.

Exemple 2 : Dégradé sur le texte

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Un arpège intra-discret transforme une polysérie ; celle-ci est une verticale ponctuelle en un tissu super polyphonique.

Cette méthode ne fonctionne pas dans Navigateur Internet Explorer jusqu'à la version 8.0 incluse, car il ne prend pas en charge les dégradés. Mais vous pouvez abandonner CSS3 et créer un dégradé à l'ancienne, via une image au format PNG-24.

Cette méthode ne peut être combinée qu'avec un fond uni, et dans le cas d'une image de fond, le dégradé au-dessus du texte sera perceptible.

Points de suspension à la fin du texte

Vous pouvez également utiliser des points de suspension à la fin du texte recadré au lieu d'un dégradé. De plus, il sera ajouté automatiquement à l'aide de la propriété text-overflow. Tous les navigateurs le comprennent, y compris les anciennes versions d'IE, et le seul inconvénient de cette propriété est que son statut n'est pas clair pour le moment. CSS3 semble inclure cette propriété, mais le code qui l'accompagne ne passe pas la validation.

L'exemple 3 montre l'utilisation de la propriété text-overflow avec la valeur points de suspension, qui ajoute des points de suspension. Lorsque vous passez votre souris sur le texte, celui-ci s'affiche dans son intégralité et est mis en évidence dans une couleur de fond.

Exemple 3 : Utilisation du débordement de texte

HTML5 CSS3 IE Cr Op Sa Fx

L'inconscient provoque un contraste, que Lee Ross désigne comme l'erreur fondamentale d'attribution, visible dans de nombreuses expériences.

Le résultat de cet exemple est présenté sur la Fig. 3.

Riz. 3. Texte avec des ellipses

Le gros avantage de ces méthodes est que le dégradé et les ellipses ne sont pas affichés si le texte est court et s'inscrit entièrement dans une zone donnée. Ainsi le texte s'affichera comme d'habitude lorsqu'il sera entièrement visible à l'écran et sera tronqué lorsque la largeur de l'élément sera réduite.