Comment utiliser CSS pour afficher des points de suspension dans la partie longue du texte du titre

Cet article présente principalement la méthode CSS pour afficher les points de suspension dans la partie longue du texte du titre, et explique la situation de débordement de texte sur une seule ligne et de débordement de texte sur plusieurs lignes. Les amis dans le 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.

Tout d'abord, voyons comment écrire des sauts de ligne dans une seule ligne de texte :

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;   
}

Démo

Le code ci-dessus Il s'agit d'une manière standard de longue date d'écrire une seule ligne de texte qui dépasse les points de suspension. Je pense que tout le monde a peut-être utilisé cette façon d'écrire dans de nombreux scénarios.
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 exigences mentionnées ci-dessus - webkit-line-clamp. Malheureusement, cette API n'est actuellement prise en charge que par Chrome. elle n'est pas incluse dans le standard W3C, ce qui signifie que cette fonction ne sera disponible que sous chrome à l'avenir. C'est vraiment dommage, mais désormais tous les terminaux mobiles utilisent le noyau de webkit, vous pouvez donc être rassuré en utilisant l'API ci-dessus. , jetons un coup d'oeil à l'implémentation par exemple :

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;   
}

Démo

Le ci-dessus est l'intégralité du contenu de cet article.J'espère qu'il sera utile à l'étude de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Utiliser CSS pour réaliser un retour à la ligne automatique de nombres anglais purs

Pratiquez-vous à utiliser CSS pour maintenir la largeur du contenu de la page Kobi

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!