Maison > Article > interface Web > Comment empêcher le contenu de déborder en CSS
Comment empêcher le contenu de déborder en CSS
- 藏色散人original
- 2023-01-31 09:34:552715parcourir
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>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>体育新闻</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!