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

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

Code CSS

.title{   
    width: 150px;   
    height: 25px;   
    line-height: 25px;   
    overflow: hidden;   
    whitewhite-space: nowrap;   
    text-overflow: ellipsis;   
}

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

Code CSS

.title{   
    width:150px;   
    overflow : hidden;   
    text-overflow: ellipsis;   
    display: -webkit-box;   
    -webkit-line-clamp: 2;   
    -webkit-box-orient: vertical;   
}

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!