Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengelakkan kandungan daripada melimpah dalam css
Bagaimana untuk mengelakkan kandungan daripada melimpah dalam css
- 藏色散人asal
- 2023-01-31 09:34:552711semak imbas
Anda boleh menggunakan atribut "text-overflow" dalam CSS untuk mengelakkan kandungan daripada melimpah -perkataan ".
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
nilai parameter limpahan-teks dan penjelasan:
clip : 不显示省略标记（...），而是简单的裁切 ellipsis : 当对象内文本溢出时显示省略标记（...） ellipsis-word : 当对象内文本溢出时显示省略标记（...）(word) white-space:nowrap;/*禁止换行,为text-overflow作准备*/ overflow:hidden; /*禁止文本溢出显示,为text-overflow作准备*/
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:
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('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>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!