Maison >interface Web >tutoriel CSS >Comment définir le texte sur 1 ligne en CSS

Comment définir le texte sur 1 ligne en CSS

藏色散人
藏色散人original
2021-02-24 10:09:5313916parcourir

Comment définir une ligne de texte en CSS : 1. Définissez le style "display: inline-block;" sur l'élément de texte pour le convertir en élément de bloc en ligne ; 2. Donnez à l'élément de texte "blanc" ; -space: nowrap;" " pour forcer le texte à ne pas être renvoyé à la ligne ; 3. Définissez le style "overflow: Hidden; text-overflow:ellipsis;" sur l'élément de texte pour masquer la partie en excès.

Comment définir le texte sur 1 ligne en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

CSS définit le texte pour afficher une seule ligne, et les ellipses supplémentaires sont affichées

CSS définit le texte pour afficher une seule ligne

.view-text{
  /**
思路:
1.设置inline-block属相
2.强制不换行
3.固定高度
4.隐藏超出部分
5.显示“……”
  */
  display: inline-block;
  white-space: nowrap; 
  width: 100%; 
  overflow: hidden;
  text-overflow:ellipsis;
}

Pièce jointe : afficher Deux lignes de

<div class="text2">热卖精选:从子频道(服饰鞋包,亲子,居家,美妆)档期里面挑选出来,库存大于30%的高信价比商品list,数量为50个</div>
/**
思路:
1.超出的文本隐藏
2.溢出用省略号显示
3.溢出不换行
4.将对象作为弹性伸缩盒子模型显示
5.从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)
6.这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数
  */
  .text2{
width:200px;
word-break:break-all;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

description du style d'attribut :

afficher l'attribut peut déterminer la position de l'élément dans la mise en page fluide Performance (élément de niveau bloc ou en ligne

  • display: block; indique que cet élément est un élément de niveau bloc, affiché verticalement, le la largeur est automatiquement remplie et la largeur et la hauteur peuvent être définies.

  • display: inline; signifie que cet élément est un élément en ligne, affiché côte à côte, la largeur est automatiquement réduite et la largeur et la hauteur ne peuvent pas être définies.

  • display:inline-block; indique que cet élément est un bloc en ligne, qui peut définir la largeur et la hauteur et s'afficher côte à côte.

attribut white-space

L'attribut white-space spécifie comment gérer les espaces dans l'élément.

描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 e03b848252eb9375d56be284e690e873 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 0c6dc11e160d3b678d68754cc175188a 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

attribut overflow

L'attribut overflow spécifie ce qui se passe si le contenu déborde de la boîte d'un élément.

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

attribut 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).

Valeur Description th>
clip Couper le texte.
points de suspension Affichez les points de suspension ...
描述
clip 剪切文本。
ellipsis 显示省略符号 ... 来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。
pour représenter le texte coupé.
chaîne Utilisez la chaîne donnée pour représenter le texte coupé.

text-overflow doit être utilisé avec les deux attributs suivants :

  • white-space: nowrap;

  • overflow: hidden;

[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