Comment utiliser CSS pour afficher une seule ligne si plus de trois lignes sont dépassées

Comment utiliser CSS pour afficher une seule ligne s'il y a plus de trois lignes : 1. Ouvrez le fichier HTML correspondant ; 2. Définissez l'attribut CSS pour l'étiquette de texte sur ".text_singlerow {display:block;white-space : nowrap;overflow:hidden; text-overflow:ellipsis;}" peut être utilisé pour afficher une seule ligne.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3, ordinateur DELL G3

Comment afficher une seule ligne en css lorsque plus de trois lignes sont dépassées ?

Contrôlez le nombre de lignes affichées dans le texte multiligne en CSS

Parfois, il est nécessaire d'afficher une seule ligne, ou deux lignes, ou trois lignes de contenu texte multiligne. À ce stade, vous en avez besoin. pour définir les attributs pertinents en CSS. Le code est le suivant :

// 多行显示
.text_morerow {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; // 显示2行
    -webkit-box-orient: vertical;
    word-break: break-all; 
}
 
 
// 单行显示
.text_singlerow {
    display:block; /*这里设置inline-block或者block；根据使用情况来定（行内元素需要加这个，块级元素和行内块级可以不用）*/
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

Il est à noter qu'en supposant que seules deux lignes soient configurées pour être affichées, la fin de la deuxième ligne sera affichée avec des points de suspension, et la troisième. ...N lignes seront toujours affichées.Si la hauteur de l'étiquette est suffisamment élevée, Par conséquent, pour contrôler l'affichage du nombre de lignes, en plus de définir le style CSS, il faut également le combiner avec le paramètre de hauteur. de l'étiquette.

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!