How to prevent content from overflowing in css-Front-end Q&A-php.cn

How to prevent content from overflowing in css

藏色散人

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

Original

2771 people have browsed it

You can use the "text-overflow" attribute in CSS to prohibit content overflow. This attribute specifies what happens when the text overflows the containing element. The syntax is "text-overflow: clip | ellipsis | ellipsis-word ".

How to prevent content from overflowing in css

The operating environment of this tutorial: Windows 10 system, CSS3 version, DELL G3 computer

How to prevent content overflow in css?

Use text-overflow attribute to achieve.

The text-overflow property specifies what happens when text overflows the containing element.

1. Text-overflow syntax:

text-overflow : clip | ellipsis | ellipsis-word

Copy after login

text-overflow parameter value and explanation:

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

Copy after login

text-ellipsis is a special style. The relevant explanation is as follows: The text-overflow attribute is just an annotation, whether to display an omission mark when the text overflows. There are no other style attribute definitions. To achieve the effect of generating ellipses when overflowing, you must also define: forcing text to be displayed in one line (white-space:nowrap) and overflowing content to be hidden (overflow:hidden). Only in this way can the effect of displaying ellipses in overflowing text be achieved.

The simple understanding is that I want to limit the text to one line (white-space: nowrap;), make sure this line is limited (width), and your overflow part needs to be hidden (overflow: hidden;) ), and then an ellipsis (text-overflow: ellipsis) appears

Compatibility:

How to prevent content from overflowing in css

2. Usage of white-space

white The -space attribute declares how to handle whitespace characters in elements during the layout process. (The white space character here should refer to the space or carriage return we type on the keyboard, because no matter what white-space is set with or
, there will be a space or carriage return.)

The following is the white space on wschool -space possible values:

normal Default. White space is ignored by the browser.

pre White space will be preserved by the browser. It behaves like the

 tag in HTML. </p><p>nowrap The text will not wrap. The text will continue on the same line until the <br> tag is encountered. </p><p>pre-wrap Preserves whitespace sequences, but wraps normally. </p><p>pre-line merges whitespace sequences but retains newlines. </p><p>inherit specifies that the value of the white-space attribute should be inherited from the parent element. </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>

Copy after login

Recommended study: "css video tutorial"

The above is the detailed content of How to prevent content from overflowing in css. For more information, please follow other related articles on the PHP Chinese website!