首頁 > web前端 > html教學 > CSS3如何实现超出指定文本以省略号显示效果_html/css_WEB-ITnose

CSS3如何实现超出指定文本以省略号显示效果_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:55:33
原創
1065 人瀏覽過

  作者:zhanhailiang 日期:2014-10-24
登入後複製

不做前端很久了,今天从重构师那里了解到CSS3已经可以实现很多以往必须通过JS才能实现的效果,如渐变,阴影,自动截断文本展示省略号等等强大效果,而且这些功能日渐成熟,已经大量用于生产环境。H5真的日渐成熟了,得恶补下了。

以下分享实现指定文本超出部分以省略号展示的Demo:

<style>.text1 {    width:200px;    overflow:hidden;    text-overflow:ellipsis;    -o-text-overflow:ellipsis;    -webkit-text-overflow:ellipsis;    -moz-text-overflow:ellipsis;    white-space:nowrap;}.text2 {    width:200px;    word-break:break-all;    display:-webkit-box;    -webkit-line-clamp:2;    -webkit-box-orient:vertical;    overflow:hidden;}</style> <div class="text1">热卖精选:从子频道(服饰鞋包,亲子,居家,美妆)档期里面挑选出来,库存大于30%的高信价比商品list,数量为50个</div> <br /> <div class="text2">热卖精选:从子频道(服饰鞋包,亲子,居家,美妆)档期里面挑选出来,库存大于30%的高信价比商品list,数量为50个</div>
登入後複製

如下图:


來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板