Comment définir le texte sur 1 ligne en CSS

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.

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 中的 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。
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!