Comment empêcher le contenu de déborder en CSS
Vous pouvez utiliser l'attribut "text-overflow" en CSS pour empêcher le débordement du contenu. Cet attribut spécifie ce qui se passe lorsque le texte déborde de l'élément conteneur. La syntaxe est "text-overflow: clip | ellipsis | ellipsis-word".
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3, ordinateur DELL G3
Comment éviter le débordement de contenu en css ?
Implémenté à l'aide de l'attribut text-overflow. La propriété
text-overflow spécifie ce qui se passe lorsque le texte déborde de l'élément conteneur.
1. syntaxe de débordement de texte :
text-overflow : clip | ellipsis | ellipsis-word
valeur du paramètre text-overflow et explication :
clip : 不显示省略标记（...），而是简单的裁切 ellipsis : 当对象内文本溢出时显示省略标记（...） ellipsis-word : 当对象内文本溢出时显示省略标记（...）(word) white-space:nowrap;/*禁止换行,为text-overflow作准备*/ overflow:hidden; /*禁止文本溢出显示,为text-overflow作准备*/
text-ellipsis est un style spécial L'explication pertinente est la suivante : l'attribut text-overflow n'est qu'une annotation, lorsque le texte. overflows S'il faut afficher la marque d'omission. Il n’existe aucune autre définition d’attribut de style. Pour obtenir l'effet de génération d'ellipses en cas de débordement, vous devez également définir : forcer l'affichage du texte sur une seule ligne (espace blanc : nowrap) et le contenu débordant à masquer (overflow : caché) Ce n'est qu'ainsi que l'effet de peut être obtenu. l'affichage des ellipses dans un texte débordant soit obtenu.
La compréhension simple est que je veux limiter le texte à une seule ligne (espace blanc : nowrap ;), m'assurer que cette ligne est limitée (largeur) et que votre partie de débordement doit être masquée (overflow : caché ;), puis il apparaît Ellipsis (text-overflow: ellipsis)
Compatibilité :
2. Utilisation de l'espace blanc
L'attribut white-space déclare comment gérer les caractères d'espacement dans les éléments pendant le processus de mise en page. (Le caractère d'espace blanc ici doit faire référence à l'espace ou au retour chariot que nous tapons sur le clavier, car quel que soit l'espace blanc défini avec ou
, il y aura un espace ou un retour chariot.)
Ce qui suit est la possibilité d'espace blanc sur wschool Valeur :
normal Default. Les espaces blancs sont ignorés par le navigateur.
les espaces pré seront conservés par le navigateur. Il se comporte comme la balise
</p><p>nowrap Le texte ne sera pas renvoyé à la ligne, le texte continuera sur la même ligne jusqu'à ce que la balise <br> </p><p>pre-wrap Préserve les séquences d'espaces, mais s'enroule normalement. </p><p>pre-line fusionne les séquences d'espaces mais conserve les nouvelles lignes. </p><p>inherit spécifie que la valeur de l'attribut espace blanc doit être héritée de l'élément parent. </p><pre class='brush:php;toolbar:false;'><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>text-overflow防止文本溢出</TITLE>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style type="text/css">
body{background:#fff; word-break:break-all;
word-wrap:break-word; font-size:12px; font-family: Arial,"宋体",Verdana; line-height:150%; margin:0px; paliing:0px; color:#404040; }
input{ font-family:Arial;}
div{margin:0; paliing:0;}
h1,h2,h3,h4,h5,h6,ul,li,dl,dt,li,form,img,p{margin:0; padding:0; border:none; list-style-type:none;}
.con_box{
margin:10px;
width:240px;
border:solid 1px #ccc;
}
h3{
padding:0 8px;
line-height:30px;
text-align:left;
font-size:13px;
border-bottom:1px solid #efefef;
}
ul{padding:5px 0;}
li{
font-size:0.78em;
height:1.5em;
width:224px;
padding:2px 8px;
margin:2px 0;
white-space:nowrap;/*禁止换行,为text-overflow作准备*/
overflow:hidden; /*禁止文本溢出显示,为text-overflow作准备*/
text-overflow:ellipsis;/*兼容 ie Safari (Webkit)*/
-o-text-overflow:ellipsis;/*兼容 Ｏpera*/
-moz-binding:url('ellipsis.html#ellipsis');/*兼容 Firefox*/
}
ul li:before {
content: "";
display: inline-block;
width: 3px;
height: 3px;
vertical-align: middle;
margin-right: 7px;
margin-top: -3px;
background: #cbcbcb;
zoom: 1;
}
</style>
<BODY>
<div class="con_box">
<h3 id="体育新闻">体育新闻</h3>
<ul>
<li>皇马打巴萨计划曝光！贝帅5大杀招誓破巴萨</li>
<li>逗妹吐槽:托蒂邓肯未来是谁的？ 火箭改名过山车</li>
<li>曼联食堂趣事:狡猾的弗格森 鲁尼两遭恶搞(图)</li>
<li>C罗母队宣布永久封存C罗7号战袍(图)</li>
<li>惊!西媒曝切尔西清洗4巨星 1月豪购6400万级锋霸</li>
</ul>
</div>
</BODY>
</HTML>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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1393
52
1205
24
Comment utiliser Bootstrap en Vue
Apr 07, 2025 pm 11:33 PM
L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Comment écrire des lignes fendues sur bootstrap
Apr 07, 2025 pm 03:12 PM
Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.
Comprendre HTML, CSS et JavaScript: un guide pour débutant
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.
Comment utiliser le bouton bootstrap
Apr 07, 2025 pm 03:09 PM
Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton
Comment configurer le cadre de bootstrap
Apr 07, 2025 pm 03:27 PM
Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
Comment insérer des photos sur bootstrap
Apr 07, 2025 pm 03:30 PM
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Comment redimensionner le bootstrap
Apr 07, 2025 pm 03:18 PM
Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-
