Maison >interface Web >tutoriel CSS >Comment implémenter des points de suspension multilignes dans du texte en CSS
Comment implémenter des points de suspension multilignes dans du texte en CSS
- coldplay.xixioriginal
- 2021-03-11 14:39:1728753parcourir
Comment implémenter des ellipses multilignes dans du texte en utilisant CSS : 1. Ajoutez le style "display: -webkit-box;" à l'élément de texte ; ;" style à l'élément de texte ; 3. Ajoutez le paramètre de style "-webkit-line-clamp: 3;" à l'élément de texte pour afficher quelques lignes de texte ; 4. Ajoutez le paramètre de style "overflow: Hidden;" à l'élément de texte pour afficher des points de suspension si le nombre de lignes dépasse le nombre spécifié.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Comment implémenter des ellipses multilignes en CSS :
Si vous souhaitez implémenter l'affichage par débordement d'ellipses dans une seule ligne de texte, les étudiants devraient tous savoir utiliser les attributs text-overflow:ellipsis, bien sûr, vous devez également ajouter l'attribut width width pour être compatible avec certaines navigations.
Obtenir l'omission de texte sur une seule ligne
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
margin:0 auto ;
width:300px;
color: red;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div>单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略</div>
</body>
</html>Résultat
Obtenir l'omission de texte sur plusieurs lignes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
margin: 0 auto;
width: 300px;
color: red;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
</style>
</head>
<body>
<div>多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略</div>
</body>
</html>Résultats
Description de l'attribut associé
Attribut CSS text- overflow
L'attribut text-overflow spécifie comment le texte doit être affiché lorsqu'il déborde de l'élément qui le contient. Après débordement, vous pouvez définir le texte à couper, à afficher des points de suspension (...) ou à afficher une chaîne personnalisée (non supportée par tous les navigateurs).
text-overflow doit être utilisé avec les deux attributs suivants :
white-space: nowrap;
overflow : caché ;
Valeurs d'attribut utilisables :
| Valeur | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| clip | Couper le texte. | ||||||||||||
| points de suspension | Affichez les points de suspension ...
|
||||||||||||
| chaîne | Utilisez la chaîne donnée pour représenter le texte coupé. | ||||||||||||
| initial | Défini comme valeur par défaut de la propriété. | ||||||||||||
| hériter | Hériter de cette valeur d'attribut de l'élément parent. |
Attribut d'espace blanc CSS
L'attribut d'espace blanc spécifie comment gérer l'espace blanc dans le élément.
| 值 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
Propriété de débordement CSS
La propriété overflow spécifie ce qui se passe si le contenu déborde de la boîte d'un élément.
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
Recommandations de tutoriel associées : Tutoriel vidéo CSS
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!