Comment définir le débordement et aucun saut de ligne en CSS

Comment définir le débordement et l'absence de saut de ligne en CSS : créez d'abord un exemple de fichier HTML ; puis définissez un div ; enfin, définissez des styles CSS tels que "overflow: caché; text-overflow:ellipsis;" et pas de saut de ligne.

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

Comment définir le débordement et l'absence de saut de ligne en CSS ?

Le débordement de texte CSS ne s'enroule pas, les ellipses sont affichées

Débordement de texte sur une seule ligne

Définissez la largeur, si plus que le texte déborde, les ellipses sont affichées

div{
width:300px;    
overflow: hidden;    
text-overflow:ellipsis;    
whitewhite-space: nowrap;
}

Plusieurs lignes de débordement de texte ; Attributs étendus CSS de WebKit, cette méthode Applicable aux navigateurs WebKit et aux terminaux mobiles

Remarque :

1.-webkit-line-clamp est utilisé pour limiter le nombre de lignes de texte affichées dans un élément de bloc ; Pour obtenir cet effet, il doit être combiné avec d'autres propriétés WebKit. Attributs couramment combinés :

2.display : -webkit-box doit être combiné pour afficher l'objet sous la forme d'un modèle de boîte flexible.

3.-webkit-box-orient doit être combiné avec l'attribut pour définir ou récupérer la disposition des éléments enfants de l'objet flex box.

div{
display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 3;    
overflow: hidden;
}

Pas encore de navigateur Webkit~~

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!