CSS 文字溢出:多行溢出、一行溢出

CSS 文字溢出:多行溢出、一行溢出

案例请点击查看文章详情。


代码如下:

  • 多行溢出设置

    css 复制代码
    .line-clamp-2{
    	/* height: 52px;
    	line-height: 25px; */
    	overflow: hidden;
    	word-break: break-all;
    	text-overflow: ellipsis;
    	display: -webkit-box;
    	-webkit-line-clamp: 2;
    	-webkit-box-orient: vertical;
    }
  • 单行溢出设置

    css 复制代码
    line-height: 25px;
    overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容)
    white-space: nowrap;(设置文字在一行显示,不能换行)
    text-overflow: ellipsis;(规定当文本溢出时,显示省略符号来代表被修剪的文本)

    text-overflow: ellipsis; 文本溢出隐藏

相关推荐
whuhewei1 小时前
为什么客户端不存在跨域问题
前端·安全
妮妮喔妮2 小时前
supabase的webhook报错
开发语言·前端·javascript
yivifu2 小时前
手搓HTML双行夹批效果
前端·html·html双行夹注
奔跑的卡卡3 小时前
Web开发与AI融合-第一篇:Web开发与AI融合的时代序幕
前端·人工智能
IT_陈寒3 小时前
Redis批量删除的大坑,差点让我加班到天亮
前端·人工智能·后端
帆张芳显3 小时前
智表ZCELL产品V3.6 版发布,新增系统预置右键菜单操作、页签栏操作等功能
前端·canva可画·excel插件
漂流瓶jz3 小时前
运行时vs编译时:CSS in JS四种主流方案介绍和对比
前端·javascript·css
Asmewill3 小时前
uv包管理命令
前端
发现一只大呆瓜3 小时前
深入浅出 Tree Shaking:Rollup 是如何“摇”掉死代码的?
前端·性能优化·vite
weixin199701080164 小时前
《转转商品详情页前端性能优化实战》
前端·性能优化