So verhindern Sie, dass Inhalte in CSS überlaufen-Front-End-Fragen und Antworten-php.cn

So verhindern Sie, dass Inhalte in CSS überlaufen

藏色散人

Freigeben： 2023-01-31 09:34:55

Original

2774 Leute haben es durchsucht

Sie können das Attribut „text-overflow“ in CSS verwenden, um zu verhindern, dass der Inhalt überläuft. Die Syntax lautet „text-overflow: clip | ellipsis | ellipsis-word“.

So verhindern Sie, dass Inhalte in CSS überlaufen

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3-Version, DELL G3-Computer

Wie verhindert man, dass Inhalte in CSS überlaufen?

Implementiert mit dem Textüberlauf-Attribut. Die Eigenschaft

text-overflow gibt an, was passiert, wenn Text das enthaltende Element überläuft.

1. text-overflow-Syntax:

text-overflow : clip | ellipsis | ellipsis-word

Nach dem Login kopieren

text-overflow-Parameterwert und Erklärung:

clip : 　不显示省略标记（...），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（...）
ellipsis-word : 　当对象内文本溢出时显示省略标记（...）(word)
white-space:nowrap;/*禁止换行,为text-overflow作准备*/
overflow:hidden; /*禁止文本溢出显示,为text-overflow作准备*/

Nach dem Login kopieren

text-ellipsis ist ein spezieller Stil: Das Text-Overflow-Attribut ist nur eine Annotation, wenn der Text overflows Gibt an, ob das Auslassungszeichen angezeigt werden soll. Es gibt keine weiteren Stilattributdefinitionen. Um den Effekt der Generierung von Ellipsen beim Überlaufen zu erzielen, müssen Sie außerdem Folgendes definieren: Erzwingen der Anzeige von Text in einer Zeile (white-space:nowrap) und Ausblenden des überlaufenden Inhalts (overflow:hidden) Nur auf diese Weise kann der Effekt erzielt werden Darstellung von Ellipsen in überlaufendem Text erreicht werden.

Das einfache Verständnis ist, dass ich den Text auf eine Zeile beschränken möchte (white-space: nowrap;), sicherstellen möchte, dass diese Zeile begrenzt ist (Breite) und Ihr Überlaufteil ausgeblendet werden muss (overflow: versteckt;), und dann erscheint Ellipse (Textüberlauf: Ellipse)

Kompatibilität:

So verhindern Sie, dass Inhalte in CSS überlaufen

2 Verwendung von Leerzeichen

Das Attribut „Leerzeichen“ gibt an, wie Leerzeichen in Elementen während des Layoutprozesses behandelt werden. (Das Leerzeichen hier sollte sich auf das Leerzeichen oder den Wagenrücklauf beziehen, den wir auf der Tastatur eingeben, denn egal, welches Leerzeichen mit oder
eingestellt ist, es wird ein Leerzeichen oder einen Wagenrücklauf geben.)

Das Folgende ist die Möglichkeit von Leerzeichen in der Schule. Wert:

normale Standardeinstellung. Leerzeichen werden vom Browser ignoriert.

Vor-Leerzeichen werden vom Browser beibehalten. Es verhält sich wie das

-Tag in HTML. </p><p>nowrap Der Text wird nicht umgebrochen, der Text wird in derselben Zeile fortgesetzt, bis das <br>-Tag gefunden wird. </p><p>pre-wrap Behält Leerzeichensequenzen bei, wird aber normal umbrochen. </p><p>pre-line führt Leerzeichensequenzen zusammen, behält aber Zeilenumbrüche bei. </p><p>inherit gibt an, dass der Wert des Leerraumattributs vom übergeordneten Element geerbt werden soll. </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(&#39;ellipsis.html#ellipsis&#39;);/*兼容　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>

Nach dem Login kopieren

Empfohlenes Lernen: „CSS-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonSo verhindern Sie, dass Inhalte in CSS überlaufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!