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.

 标签。

attribut overflow

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

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

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!