How to achieve the effect of displaying ellipses beyond the specified text in CSS3_html/css_WEB-ITnose

  作者：zhanhailiang 日期：2014-10-24

I haven’t been doing front-end work for a long time. Today I learned from a reconstructionist that CSS3 can already achieve many effects that could only be achieved through JS in the past, such as gradients, shadows, and automatic truncation of text to display ellipses. Wait for powerful effects, and these functions are becoming increasingly mature and have been widely used in production environments. H5 is really maturing day by day, and it makes up for the evil with each passing day.

The following is a demo that implements displaying the excess part of the specified text with ellipses:

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

As shown below: