CSS截断长文本并使用省略号代替

网站很多地方都需要用省略号来截断长文本,比如分类页里每篇文章的概要等,那么怎么用css来实现呢?其实并不复杂,最后的效果如下图:

CSS截断长文本并使用省略号代替

我们要用 text-overflow: ellipsis; 表示用省略号代替截断的文字。

要实现图中的效果,只用这一句代码还不行,我们还需要:

1、为文本设置一个明确的宽度,以限制文本的范围

2、还需要 white-space: nowrap; overflow: hidden; 这样可以使文本在一行显示,并且隐藏超过部分,用省略号代替。

CSS截断长文本并使用省略号代替 完整代码如下所示:

.truncate-to-300 { 
    text-overflow: ellipsis; 
    width: 300px;
    white-space: nowrap; 
    overflow: hidden; 
}

下面是html代码,这样就实现了上图中的效果

<h1 class="truncate-to-300">A CSS tricky situation- the order of the CSS class names in the HTML tags</h1>

还有一些技术允许在多行后截断文本,但实现起来有点麻烦,以后我们再做分享!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 ttt5cn@163.com 举报,一经查实,本站将立刻删除。

发表评论

登录后才能评论