微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css 超过两行截断

CSS是前端开发中不可或缺的一部分,它可以控制页面的样式,让网页变得更加漂亮和易于阅读。在CSS中,我们常常会遇到需要把一段超过两行的文本截断的情况,这时候我们可以使用text-overflow属性和white-space属性来实现。

    .Box{
        width: 200px;
        height: 30px;
        overflow: hidden;
        white-space: Nowrap;
        text-overflow: ellipsis;
    }

css 超过两行截断

在上面的CSS代码中,我们创建了一个名为Box的class,它的宽度为200px,高度为30px。overflow属性设置为hidden,这将意味着当文本超出Box的范围时将被裁剪。white-space属性设置为Nowrap,这将禁止文本中的换行符,使文本在一行中。text-overflow属性设置为ellipsis,它告诉浏览器当文本被截断时,应该显示省略号(...)。

使用上述CSS代码后,当文本超出Box的宽度时,将被截断且在末尾自动添加省略号。这是一个很常用的样式,特别是在制作新闻标题或列表时。

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