Maison > interface Web > tutoriel CSS > le corps du texte

Une introduction à la façon d'utiliser CSS pour afficher des points de suspension dans le texte du titre trop long

高洛峰
Libérer: 2017-03-09 17:56:05
original
1366 Les gens l'ont consulté

Cet article présente principalement la méthode d'utilisation de CSS pour afficher les points de suspension dans la partie longue du texte du titre, et explique la situation du débordement de texte sur une seule ligne et du débordement de texte sur plusieurs lignes. Les amis qui en ont besoin peuvent s'y référer. Il y a quelque temps, lors de la reconstruction du site mobile de l'entreprise, nous avons rencontré l'exigence selon laquelle le titre d'une liste de produits n'affichait que deux lignes, puis les caractères dépassant deux lignes devaient être affichés avec des points de suspension. Comme le montre l'image ci-dessous, la première impression à l'époque était que cette exigence ne pouvait être traitée qu'en interceptant des caractères lors de la sortie en arrière-plan, ou en calculant des caractères via JS, car le style ne peut pas contrôler l'omission du texte renvoyé à la ligne, mais parce que notre nouvelle version du site mobile est en streaming. Pour les mises en page, la largeur des sauts de ligne sur les téléphones mobiles sous différentes résolutions est incertaine, il n'y a donc pas de plage standard pour le nombre de caractères à intercepter. Par exemple : 15 caractères sont affichés sur deux lignes sur l'iPhone, mais sur Samsung, ils peuvent ne pas être affichés sur deux lignes, ou sur un téléphone mobile avec une résolution inférieure, 15 caractères sont déjà affichés. trois lignes. Dans ce cas, c'est un casse-tête quand cela arrive.
Voyons d'abord comment écrire des sauts de ligne dans une seule ligne de texte :

Le code est le suivant :

A20 Banana Pi Development Board Module - Deep Blue
Copier après la connexion
Copier après la connexion


Code CSS

.title{   
    width: 150px;   
    height: 25px;   
    line-height: 25px;   
    overflow: hidden;   
    whitewhite-space: nowrap;   
    text-overflow: ellipsis;   
}
Copier après la connexion

Le code ci-dessus est une manière standard de longue date d'écrire du texte sur une seule ligne débordant d'ellipses. Dans de nombreux scénarios, je pense que tout le monde a peut-être utilisé cette façon d'écrire.

Comment résoudre le problème de l'affichage multiligne ? Après quelques recherches sur Google, j'ai trouvé une API de Chrome qui peut résoudre les besoins mentionnés ci-dessus - webkit-line-clamp. Malheureusement, cette API est actuellement disponible. seul Chrome peut le supporter, et il n'est pas inclus dans le standard W3C. Cela signifie qu'à l'avenir, cette fonction ne sera disponible que sous Chrome, mais désormais tous les terminaux mobiles utilisent le noyau webkit, vous pouvez donc le faire. utilisez l'API ci-dessus en toute confiance. Jetons un coup d'œil à l'implémentation, par exemple :

Le code est le suivant :

A20 Banana Pi Development Board Module - Deep Blue
Copier après la connexion
Copier après la connexion


Code CSS

.title{   
    width:150px;   
    overflow : hidden;   
    text-overflow: ellipsis;   
    display: -webkit-box;   
    -webkit-line-clamp: 2;   
    -webkit-box-orient: vertical;   
}
Copier après la connexion


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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!