Heim > Artikel > Web-Frontend > 使用CSS如何实现截取标题并用省略号表示超出部分_html/css_WEB-ITnose
使用CSS如何实现截取标题并用省略号表示超出部分_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:401071Durchsuche
使用CSS如何实现截取标题并用省略号表示超出部分:
众多的网站都有这样的效果，当新闻标题过长的时候，一般都会截取一部分，并且会在末尾使用省略号（...）表示被截取掉的部分。这样的效果当然也可以由后台程序员来完成，当然前台人员利用CSS也可以实现此效果，可以省却很多后台代码，有着不小的有点。下面简单介绍一下如何实现此种效果。代码实例如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">div{ overflow:hidden; white-space:nowrap; height:30px; width:230px; border:1px solid red; line-height:30px; margin-top:10px; text-overflow:ellipsis;}</style></head><body><div class="first">每一天都是新的，所以生活要和昨天有所不同！</div></body></html> 以上代码实现了我们想要的效果，将text-overflow属性值设置为ellipsis即可。
特别说明:需要设置overflow:hidden和white-space:nowrap才会生效，否则文本会溢出或者产生换行。
原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0504/724.html
最原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4644
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：如何使用CSS实现细线表格效果_html/css_WEB-ITnoseNächster Artikel：CSS3_实现圆角效果box-shadow_html/css_WEB-ITnose