Explication détaillée de plusieurs méthodes d'interception de caractères avec CSS (la composition CSS masque le texte de débordement)

Explication détaillée de plusieurs méthodes d'interception de caractères avec CSS (la composition CSS masque le texte de débordement)_CSS/HTML

WBOY

Libérer： 2016-05-16 12:03:38

original

2789 Les gens l'ont consulté

Méthode 1 :

Copier le code Le code est le suivant :

Une chaîne de n'importe quelle longueur

Remarque : L'avantage est que le contenu peut être n'importe quel élément HTML, y compris des hyperliens et des images, etc. Dans IE6, des points de suspension seront automatiquement affichés à la fin. L'inconvénient est que la valeur de la largeur doit être spécifiée et que la largeur ne peut pas être un pourcentage, sinon elle sera considérée comme un pourcentage de la longueur totale des caractères dans IE.

Méthode 2 :

Copier le code Le code est le suivant :

Remarque : L'avantage est que la largeur peut être définie en pourcentage. Mais l’inconvénient est que le contenu ne peut être que du texte brut et ne peut pas contenir d’hyperliens ni d’autres contenus.

CSS truncate string CSS implémente la troncature automatique du texte, le code est le suivant :

Copier le code Le code est le suivant :

div.test{

largeur:200px;

hauteur : 14px ;

débordement : caché ;

espace blanc:nowrap;

débordement de texte: points de suspension;

débordement de texte : points de suspension ;/* IE/Safari */

-ms-text-overflow : points de suspension ;

-o-text-overflow: points de suspension;/* Opera */

-moz-binding: url("ellipsis.xml#ellipsis");/*FireFox*/

}

La clé est text-overflow, sa syntaxe est la suivante :

Copier le code Le code est le suivant :

text-overflow:clips
clip : Ne pas afficher les marqueurs de points de suspension (...), mais un simple recadrage 
points de suspension : Afficher les marqueurs de points de suspension (...) lorsque l'objet déborde du texte intérieur 

Il est à noter que cet attribut est exclusif à IE ! Cependant, IE n'est pas le seul disponible. Bien que cette balise ne soit pas publiquement prise en charge et adoptée par Guaioh, elle est incluse dans les propriétés privées de nombreux navigateurs. Le débordement de texte seul ne fonctionnera pas. Il doit être combiné avec white-space:nowrap;overflow:hidden;. La fonction de la phrase précédente est de forcer tout le texte à être affiché sur la même ligne jusqu'à ce que la fin du texte ou l'objet br soit rencontré.

Il n'est pas difficile de voir que le meilleur endroit pour utiliser le débordement de texte n'est pas le texte de l'article, mais une liste de titres ou de résumés affichés sur une seule ligne.

Syntaxe :

Copier le code Le code est le suivant :

espace blanc : normal nowrap |

Valeur :

Copier le code Le code est le suivant :

normal : Valeur par défaut. Méthode de traitement par défaut. Le texte gère automatiquement les sauts de ligne. Si la limite du conteneur est atteinte, le contenu ira à la ligne suivante 
pre : Les sauts de ligne et autres caractères d'espacement seront protégés. Cette valeur nécessite IE6+ ou !DOCTYPE déclaré comme prise en charge du mode conforme aux normes. Si la déclaration !DOCTYPE ne spécifie pas de mode conforme aux normes, cet attribut peut être utilisé, mais n'aura aucun effet. Le résultat est équivalent à la normale. Voir pre object
nowrap : force tout le texte à être affiché sur la même ligne jusqu'à ce que la fin du texte ou qu'un objet br soit rencontré. Voir l'attribut noWrap

Description :

Définissez ou récupérez la méthode de traitement des caractères d'espacement dans l'objet.

Les espaces, comme les sauts de ligne, les espaces et les tabulations, sont ignorés par défaut dans les documents HTML. Lorsque cette propriété est définie sur normal ou nowrap , vous pouvez utiliser l'entité nommée avec espace insécable pour ajouter des espaces et l'élément br pour ajouter des nouvelles lignes. Cette propriété a le même effet sur le contenu que vous manipulez à l'aide du modèle d'objet de document (DOM) que sur le contenu affiché par IE.

Cette propriété fonctionne sur les objets bloc.

Cette propriété est en lecture seule pour l'objet currentStyle. Il est lisible et inscriptible par d'autres objets.

La fonctionnalité de script correspondante est whiteSpace .