Maison  >  Article  >  interface Web  >  Comment implémenter le style CSS au-delà du masquage

Comment implémenter le style CSS au-delà du masquage

藏色散人
藏色散人original
2021-07-10 11:37:417071parcourir

Comment implémenter le style CSS sur-caché : créez d'abord un exemple de fichier HTML ; puis définissez l'effet de texte sur-caché via "overflow : caché ; text-overflow : points de suspension ;".

Comment implémenter le style CSS au-delà du masquage

L'environnement d'exploitation de cet article : système Windows7, version HTML5&&CSS3, ordinateur DELL G3

Comment réaliser au-delà du masquage du style CSS ?

style CSS au-delà des points de suspension

width: 30px;
overflow: hidden;   //隐藏
white-space: nowrap;  //不换行
text-overflow: ellipsis; //超出部分省略号

Définition et utilisation :
L'attribut d'espace blanc définit comment gérer l'espace blanc dans l'élément.
Valeurs possibles :

normal
Valeur Description
Par défaut, les espaces seront ignorés par le navigateur
pre Les espaces seront conservés par le navigateur. Elle se comporte comme la balise pre en HTML
nowrap Le texte ne revient pas à la ligne, le texte continue sur la même ligne jusqu'à ce que la balise
描述
normal 默认,空白会被浏览器忽略
pre 空白会被浏览器保留。其行为方式类似于HTML中的pre标签
nowrap 文本不换行,文本会在同一行上继续,直到遇到
标签为止
pre-wrap 保留空白序列,但是正常地进行换行
inherit 规定应该从父元素继承white-space属性的值

text-overflow 属性规定当文本溢出包含元素时所发生的事情。

描述
clip 默认,修剪文本
ellipsis 显示省略号代表省略的文本
string 适用给定的字符串来代表被修剪的文本
soit rencontrée
pre-wrap Conserver les séquences d'espaces, mais envelopper normalement
hériter td>Spécifie que la valeur de l'attribut white-space doit être héritée de l'élément parent
L'attribut text-overflow spécifie ce qui se passe lorsque le texte déborde de l'élément conteneur. string
Valeur Description
clip Par défaut, couper le texte
points de suspension Afficher des points de suspension pour représenter le texte omis
Utilisez la chaîne donnée pour représenter le texte coupé

Apprentissage recommandé : " 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!

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