Résumé de la propriété text-overflow en CSS

Syntaxe :
text-overflow : clip | points de suspension
Paramètres :
clip : Ne pas afficher la marque d'omission (...), mais la recadrer simplement
points de suspension : Afficher une marque de points de suspension (...) lorsque le texte dans l'objet déborde
Description :
Définir ou récupérer s'il faut utiliser une marque de points de suspension (...) pour marquer le débordement du texte dans l'objet .
La fonctionnalité de script correspondante est textOverflow. Veuillez consulter les autres livres que j'ai écrits.

Exemple :

div { text-overflow : clip; }

Comment obtenir l'effet de débordement de texte en CSS2.1

Voir Ça a l'air bien, testons-le

<div style="width:100px;height:20px;text-overflow:ellipsis; ">a b c d e f g h i j k l , msa sd sd sa w df f </div> 
<div style="width:100px;height:20px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden; ">a b c d e f g h i j k l , msa sd sd sa w df f </div>

Pour le moment, l'affichage est normal
L'attribut text-overflow est juste une annotation, s'il faut afficher la marque d'omission lorsque le. le texte déborde. Il n’existe aucune autre définition d’attribut de style. Nous voulons obtenir l'effet de produire des points de suspension en cas de débordement. Vous devez également définir : forcer l'affichage du texte sur une seule ligne (white-space:nowrap) et le masquage du contenu de débordement (overflow:hidden). Ce n'est qu'ainsi que l'effet d'affichage d'ellipses dans le texte de débordement peut être obtenu.
1. Seule la définition de text-overflow:ellipsis; ne peut pas obtenir l'effet de points de suspension.
2. Définissez text-overflow:ellipsis; white-space:nowrap; et l'effet points de suspension ne peut pas non plus être obtenu
3. appliquer en même temps : text-overflow:ellipsis ; white-space:nowrap; overflow:hidden; obtient l'effet de points de suspension d'affichage de texte de débordement souhaité :

div s'adapte automatiquement à la largeur et utilise l'instance de débordement de texte

<style> 
#all{ 
float:center; 
text-align:left; 
overflow: hidden;
} 
#a{ 
float:left; 
text-align:left; 
width:100px;height:50px; 
border:1px solid black; 
text-overflow:ellipsis; 
white-space:nowrap; 
padding-bottom: 10000px;margin-bottom: -10000px;
} 
#b{ 
float:left; 
width:40px;height:50px; 
border:1px solid black;
padding-bottom: 10000px;margin-bottom: -10000px; 
} 
</style>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!