Maison > Article > interface Web > Utilisez CSS3 pour tronquer le texte et ajouter des points de suspension

Utilisez CSS3 pour tronquer le texte et ajouter des points de suspension

PHPzoriginal: 2017-04-02 10:28:411991parcourir

Affichage du code :

overflow : hidden;
/*text-overflow: ellipsis; 有些示例里需要定义该属性，实际可省略*/
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

Vue d'ensemble

-webkit-line-clamp est une propriété WebKit non prise en charge qui n'apparaît pas dans le projet de spécification CSS.

Limiter le nombre de lignes de texte affichées dans un élément de bloc. Afin d'obtenir cet effet, il doit être combiné avec d'autres propriétés WebKit étrangères. Attributs couramment combinés :

display : -webkit-box ; Attributs qui doivent être combinés pour afficher l' objet sous la forme d'un modèle de boîte à mise à l'échelle élastique.

-webkit-box-orient doit être combiné avec l'attribut pour définir ou récupérer la disposition des éléments enfants de l'objet flex box.

text-overflow, qui peut être utilisé pour masquer le texte hors plage avec des points de suspension "..." dans le cas d'un texte multiligne.

Tous les codes :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>css3截取字符串多行</title>
<style>
.box { 
width: 400px; 
display: -webkit-box; 
-webkit-line-clamp: 3; 
-webkit-box-orient: vertical; overflow: hidden;
}
</style>
</head></p> <p><body>
<div class="box">
css3截取字符串多行，css3截取字符串多行，css3截取字符串多行，css3截取字符串多行，css3截取字符串多行，
</div>
</body>
</html>

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!

Déclaration：

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

Article précédent：Présenter les différences entre la transition CSS3 et l'animationArticle suivant：Présenter les différences entre la transition CSS3 et l'animation

Articles Liés

Voir plus