【CSS】一行超出...隐藏，两行超出...隐藏

最新推荐文章于 2024-07-10 11:25:43 发布

前端小峰

最新推荐文章于 2024-07-10 11:25:43 发布

阅读量1.1k

点赞数

分类专栏：前端技术 CSS 文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/Shaoyouiqng/article/details/120496953

版权

前端技术同时被 2 个专栏收录

39 篇文章

订阅专栏

CSS

1 篇文章

订阅专栏

本文介绍了CSS中实现文本超出部分隐藏的两种方法：一行文本使用`overflow:hidden; white-space:nowrap; text-overflow:ellipsis;`，多行文本则结合使用`width`、`text-overflow`、`display-webkit-box`等属性。示例分别展示了车牌和地址的隐藏效果，适用于网页布局中需要限制显示长度的文本内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

美丽的UI小姐姐总是让你…展示，不知道有什么是见不得人的，那我今天帮你做个遮羞布

一行超出…展示

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

差不多就是这样的效果，我这里展示的是车牌
在这里插入图片描述

多行超出…展示

width:300px // 这个宽度要确定才可以给你隐藏
text-overflow ellipsis
display -webkit-box
-webkit-line-clamp 2
-webkit-box-orient vertical
overflow hidden

差不多就是这样的效果，我这里展示的是一个地址

在这里插入图片描述