Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk mencapai kesan memaparkan elipsis dalam bahagian yang melebihi dalam css
<style> .box { width: 200px; height: 50px; overflow: hidden; white-space: nowrap; /* 防止文字换行 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ } </style> <div>这是一段很长很长很长的文本,需要省略显示</div><p>该例子中,我们创建了一个
<div>元素,设置了其宽度为200px、高度为50px,并设置了溢出部分隐藏属性<code>overflow: hidden;
。由于文字超出容器时会自动换行,因此我们还需要使用white-space: nowrap;
属性防止文字换行。最后使用text-overflow: ellipsis;
实现超出部分省略号的效果。<p>三、应用到不同元素上
<p>除了<div>
元素,text-overflow
属性还可以应用于其他块级元素,如<p>
、<h1>
、<ul>
等。
<p>例如:
<p>这是一段很长很长很长的文本,需要省略显示</p>
.text { width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }<p>四、注意事项
text-overflow
属性时,必须先设置overflow: hidden;
,否则该属性无法生效。text-overflow
属性只对单行文本生效,对于多行文本需要使用CSS3的-webkit-line-clamp
属性或JavaScript进行处理。text-overflow
属性在网页设计中非常实用,可以让网页更加美观易读。在使用时需要注意以上几点,能够让文字省略的样式更加完善、美观。
Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan memaparkan elipsis dalam bahagian yang melebihi dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!