位置: IT常识 - 正文

css关于文本溢出(css单行文本溢出隐藏)

编辑:rootadmin
css关于文本溢出 处理思路

推荐整理分享css关于文本溢出(css单行文本溢出隐藏),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css 文本溢出省略,文本溢出text-overflow属性有哪些,css文本溢出隐藏,css单行文本溢出隐藏,文本溢出的属性,css单行文本溢出隐藏,css单行文本溢出隐藏,html文本溢出处理,内容如对您有帮助,希望把文章链接给更多的朋友!

1)给需要做溢出处理的文本元素设置width或者max-width 2)超出部分省略 overflow:hidden 3) 文本溢出处理方式 text-overflow: ellipsis | clip | 自定义字符 如:“_” “.” 4) 设置文本不换行 white-space: nowrap

单行文本溢出

最常见的用法:

<div class="wrapper"> this is a text , it is very long long long and long </div>height: 50px;border: 1px solid pink;width: 200px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;

效果:

● text-overflow: string (存在浏览器兼容问题,大部分浏览器不支持)

表示 自定义省略字符 Two-value syntax 表示两行语法,text-overflow是支持传入两个值的,如: text-overflow: clip clip; 当传入两个值的时候,第一个值表示左边超出部分的省略,第二个值表示右边超出的省略。

css关于文本溢出(css单行文本溢出隐藏)

所以在大多数时候,我们只能使用 text-overflow: ellipsis | clip 这俩属性。 缺陷: 1)经过测试,这种方法设置的文本省略在处理英文单词时,具有一定的随机性。 省略边缘单词的长短可能会影响省略效果。 例如:this is a text , it is very long

long这个单词没有完全省略,而是显示了一个 l 但是换成另一个比较长的单词:this is a text , it is very beatiful

这个单词就完全隐藏了。 一开始以为跟截断机制有关,后来发现就是首字母的宽度导致的。 截断边缘处需要放省略号,它有固定宽度,当判断显示的内容不够显示省略号时,会把整个单词都隐藏,否则单词会被截断部分显示省略。

可以用text-overflow:‘…’ 自定义一个解决这个问题,但是大多数浏览器不兼容。 这个文本溢出也可以用canvas精确统一的解决,但是难免大材小用了。

2)只能实现单行文本溢出处理 因为设置了white-space:nowrap 的缘故。

当要处理多行文本溢出时,可以使用下面的方法。

多行文本溢出(只有webkit内核才有作用)

/多行文本溢出用省略号显示:/ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 值得注意的是,只有当dispaly:-webkit-box 且-webkit-box-orient: vertical; 时-webkit-line-clamp: 3;才会生效 这个值可以控制文本溢出的行数。

mdn介绍:https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-overflow

参考文章:https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp

本文链接地址:https://www.jiuchutong.com/zhishi/295956.html 转载请保留说明!

上一篇:MySQL 高级查询(MySQL高级查询)

下一篇:ECharts的讲解(echarts简介)

  • 小米卡怎么注销(小米卡怎么注销掉)

    小米卡怎么注销(小米卡怎么注销掉)

  • 有声卡pk听不到声音(有声卡pk听不到对方声音)

    有声卡pk听不到声音(有声卡pk听不到对方声音)

  • Excel怎么把一个单元格分成两个三角(excel怎么把一个表格内容分割成两个)

    Excel怎么把一个单元格分成两个三角(excel怎么把一个表格内容分割成两个)

  • 爱奇艺弹幕开关不见了(爱奇艺弹幕开关在哪苹果)

    爱奇艺弹幕开关不见了(爱奇艺弹幕开关在哪苹果)

  • win10电脑网络属性打不开(win10网络类型在哪里设置)

    win10电脑网络属性打不开(win10网络类型在哪里设置)

  • 华为手机门禁卡读不出来(华为手机门禁卡怎么在手机上使用)

    华为手机门禁卡读不出来(华为手机门禁卡怎么在手机上使用)

  • 入店来源显示我的淘宝(入店来源显示其他来源)

    入店来源显示我的淘宝(入店来源显示其他来源)

  • 快手小店有没有运费险(快手小店有没有新手期)

    快手小店有没有运费险(快手小店有没有新手期)

  • 诺基亚旋转手机是什么型号(诺基亚旋转手机图片)

    诺基亚旋转手机是什么型号(诺基亚旋转手机图片)

  • 电脑backspace失灵了怎么办(电脑backspace用不了)

    电脑backspace失灵了怎么办(电脑backspace用不了)

  • 淘宝没有朋友代付怎么回事(淘宝没有朋友代付给选项)

    淘宝没有朋友代付怎么回事(淘宝没有朋友代付给选项)

  • iPhone?6s和iPhone?X拍照对比(apple iphone 6s)

    iPhone?6s和iPhone?X拍照对比(apple iphone 6s)

  • realmex50和红米k30有什么区别(realmex505g和红米k305g哪个好)

    realmex50和红米k30有什么区别(realmex505g和红米k305g哪个好)

  • 苹果电脑错误删除了软件怎么办(苹果电脑错误删除怎么办)

    苹果电脑错误删除了软件怎么办(苹果电脑错误删除怎么办)

  • ipad可以插u盘吗(平板ipad可以插u盘吗)

    ipad可以插u盘吗(平板ipad可以插u盘吗)

  • 华为手机如何超级快充(华为手机如何超级长截屏)

    华为手机如何超级快充(华为手机如何超级长截屏)

  • 手机怎么查看qq群等级(手机怎么查看qq邮箱收到的信息)

    手机怎么查看qq群等级(手机怎么查看qq邮箱收到的信息)

  • 如何退出抖音喜欢作品(咋样取消抖音喜欢)

    如何退出抖音喜欢作品(咋样取消抖音喜欢)

  • 京东怎么看我的预约(京东怎么看我的红包)

    京东怎么看我的预约(京东怎么看我的红包)

  • j4205处理器什么水平(j4205处理器相当于几代i3)

    j4205处理器什么水平(j4205处理器相当于几代i3)

  • 为什么手机解锁后自动往上弹支付宝(为什么手机解锁自动打开抖音)

    为什么手机解锁后自动往上弹支付宝(为什么手机解锁自动打开抖音)

  • 育空怀特霍斯附近的北极光,加拿大 (© Design Pics/Danita Delimont)

    育空怀特霍斯附近的北极光,加拿大 (© Design Pics/Danita Delimont)

  • YOLOv5|YOLOv7|YOLOv8改各种IoU损失函数:YOLOv8涨点Trick,改进添加SIoU损失函数、EIoU损失函数、GIoU损失函数、α-IoU损失函数

    YOLOv5|YOLOv7|YOLOv8改各种IoU损失函数:YOLOv8涨点Trick,改进添加SIoU损失函数、EIoU损失函数、GIoU损失函数、α-IoU损失函数

  • 解决d2l包下载不了的问题(d2loader does not recognize)

    解决d2l包下载不了的问题(d2loader does not recognize)

  • 临时税务登记的小规模纳税人 个人所得税如何申报
  • 建筑公司包工包料账务处理
  • 其他债权投资的汇兑差额计入什么科目
  • 加计抵减附加税怎么做账务处理
  • 什么情况需要预缴税款
  • 移动话费可以开企业发票吗
  • 发放代扣代缴个人所得税分录
  • 样品销售如何记账
  • 研发加计扣除减免税
  • 建筑工程管理费包括哪些内容
  • 税法免抵退计算例题
  • 净利润为负数还要交所得税吗
  • 结算本月应付职工薪酬,其中生产工人工资为18000
  • 化工类资质建筑企业有哪些
  • 计提坏账准备的前提条件
  • 个体户报税可以朋友代替吗
  • 简易计税方法是什么意思
  • 2020年最新增值税租车费
  • 购物发票的税是由谁承担
  • 发票作废了还能查验吗
  • 汽车中介赚钱吗
  • 收到场地租赁费用计入什么科目
  • 企业已交地税税金如何做账务处理?
  • 无租使用房产协议
  • 兼营行为的含义
  • win8系统如何设置u盘启动
  • 住房公积金扣除标准为每月
  • 员工两处取得的荣誉
  • 盘盈的资产
  • 无法收回的保证金计入营业外支出汇算清缴调增填其他吗
  • php面向对象的三大特征
  • 冲减其他应收款摘要怎么写
  • 收入支出如何结转
  • vue antdesign
  • PHP:mdecrypt_generic()的用法_Mcrypt函数
  • 夜间潜水时发现水体
  • 营业店面装修费怎么入账
  • php中exec
  • 我用ChatGPT做直播技术选型,卷死了同事
  • 论文导语如何写
  • 发票去税务局认证了就可以直接抵扣了吗
  • 或有资产确认的前提为什么是
  • 机动车价外费用发票如何开具
  • 增值税多交了五万怎么办
  • 工会经费缴纳后会返还吗
  • 购进销售农产品正常损耗怎么算
  • 小微企业的所得税税率是多少
  • 接受现金资产投资会引起实收资本增加吗
  • 管理不善的进项税额去了哪里
  • 子公司再设立子公司
  • 成品油发票怎么录入库存
  • 汇总记账凭证会计核算形式下总分类账账页格式一般采用
  • 购进商品印花税怎么计算
  • 购进商品售价金额核算
  • 应付账款的逾期利息计入什么科目
  • 货物丢失怎么做分录
  • 一般纳税人购买汽车会计分录
  • 设计费要计入固定成本吗
  • 技术咨询费属于什么类别
  • 企业会计的应用指南
  • win8更新win8.1
  • centos账号密码
  • win10提高
  • windows7怎
  • 安全账户管理器或本地安全机构服务器
  • xpspeak导入数据总是error reading
  • windows7打不了字怎么办
  • perl uc,lc,ucfirst,lcfirst大小写转换函数
  • cocos2dx游戏案例
  • opengl点的绘制
  • cmd切换到当前目录
  • vue使用jssdk
  • JavaScript中的数据类型
  • unity打包全屏
  • Python字符串的常用方法
  • 审计局查什么内容
  • 噼里啪啦财务公司加盟
  • 车船税属于地方固定收入吗
  • 石家庄水费阶梯价格表 2020
  • 重庆国税12316
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设