Maison >interface Web >Questions et réponses frontales >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 CSSCe 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!