Bagaimana untuk mengelakkan kandungan daripada melimpah dalam css-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk mengelakkan kandungan daripada melimpah dalam css

藏色散人

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

asal

2738 orang telah melayarinya

Anda boleh menggunakan atribut "text-overflow" dalam CSS untuk mengelakkan kandungan daripada melimpah -perkataan ".

Bagaimana untuk mengelakkan kandungan daripada melimpah dalam css

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3, komputer DELL G3

Cara mengelakkan kandungan daripada melimpah dalam css?

dilaksanakan menggunakan atribut limpahan teks.

Atribut limpahan teks menentukan perkara yang berlaku apabila teks melimpahi elemen yang mengandungi.

1. sintaks limpahan-teks:

text-overflow : clip | ellipsis | ellipsis-word

Salin selepas log masuk

nilai parameter limpahan-teks dan penjelasan:

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

Salin selepas log masuk

elipsis teks ialah gaya khas, penjelasan berkaitan. perkara itu: atribut limpahan teks hanyalah anotasi, sama ada untuk memaparkan tanda peninggalan apabila teks melimpah. Tiada definisi atribut gaya lain. Untuk mencapai kesan menjana elips apabila melimpah, anda juga mesti mentakrifkan: memaksa teks untuk dipaparkan dalam satu baris (white-space:nowrap) dan kandungan melimpah untuk disembunyikan (overflow:hidden Hanya dengan cara ini boleh kesan daripada memaparkan elips dalam teks yang melimpah dapat dicapai.

Pemahaman mudahnya ialah saya ingin mengehadkan teks kepada satu baris (ruang putih: nowrap;), pastikan baris ini terhad (lebar), dan bahagian limpahan anda perlu disembunyikan (limpahan: tersembunyi;) ), kemudian elipsis muncul (limpahan teks: elipsis)

Keserasian:

Bagaimana untuk mengelakkan kandungan daripada melimpah dalam css

Penggunaan ruang putih

putih Atribut -space mengisytiharkan cara mengendalikan aksara ruang putih dalam elemen semasa proses reka letak. (Watak ruang putih di sini harus merujuk kepada ruang atau pemulangan gerabak yang kita taip pada papan kekunci, kerana tidak kira apa ruang putih yang ditetapkan dengan atau
, akan ada ruang atau pemulangan gerabak.)

Berikut ialah ruang putih pada wschool Nilai yang mungkin untuk -ruang:

Lalai biasa. Ruang putih diabaikan oleh penyemak imbas.

kosong pra akan disimpan oleh penyemak imbas. Ia berkelakuan seperti teg

nowrap Teks tidak akan dibalut, teks akan diteruskan pada baris yang sama sehingga teg

pra-bungkus Mengekalkan jujukan ruang putih, tetapi membalut seperti biasa.

pra-baris menggabungkan jujukan ruang putih tetapi mengekalkan baris baharu.

warisan menyatakan bahawa nilai atribut ruang putih harus diwarisi daripada elemen induk.

<!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>

Salin selepas log masuk

Pembelajaran yang disyorkan: "tutorial video css"

Atas ialah kandungan terperinci Bagaimana untuk mengelakkan kandungan daripada melimpah dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!