Utilisez CSS3 pour tronquer le texte et ajouter des points de suspension-tutoriel CSS-php.cn

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

PHPz

Libérer： 2017-04-02 10:28:41

original

2037 Les gens l'ont consulté

Affichage du code :

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

Copier après la connexion

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>

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!