文字溢出打点点点解决方案

文字溢出

我们经常需要做到在固定宽高内显示文字,当文字内容过多不希望全部显示,通过打…来代表文字未完,我们是这样做的
在这里插入图片描述
1.单行文本

.box{
	white-space:nowrap;/*首先先让文本失去换行功能*/
	overflow:hidden;/*再溢出部分不展示隐藏*/
	text-overflow:ellipsis;/*最后把溢出部分打点*/
}

2.多行文本

溢出打点方式 :有些时候通过后段根据文字长度计算宽高,快要溢出时候 后端直接加上…

(本菜鸟觉得可不可以:通过js获取元素 快要溢出时候 在文字后面::after伪元素选择器加上content:"…" 只是个人想法 不确定可不可以qaq)

比较好的方法是做截断

截断办法:行高line-height 等于 盒子高度height
截断之后 加上overflow:hidden这样就看不见溢出的文字了

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值