Home > Article > Web Front-end > How to use CSS to intercept the title and use ellipsis to indicate the excess part_html/css_WEB-ITnose
How to use CSS to intercept the title and use ellipsis to indicate the excess part_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:401039browse
How to use CSS to intercept the title and use ellipsis to indicate the excess part:
Many websites have this effect. When the news title is too long, Generally, a part will be intercepted, and an ellipsis (...) will be used at the end to indicate the intercepted part. Of course, this effect can also be achieved by back-end programmers. Of course, front-end staff can also use CSS to achieve this effect, which can save a lot of back-end code, which has a lot of advantages. Here is a brief introduction on how to achieve this effect. The code example is as follows:
<!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> The above code achieves the effect we want, just set the text-overflow attribute value to ellipsis.
Special note: You need to set overflow:hidden and white-space:nowrap to take effect, otherwise the text will overflow or wrap.
The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0504/724.html
The original address is: http://www.softwhy.com/ forum.php?mod=viewthread&tid=4644