位置: 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简介)

  • 百度贴吧怎样发帖才能获取更多流量?(百度贴吧怎样发视频)

    百度贴吧怎样发帖才能获取更多流量?(百度贴吧怎样发视频)

  • 索尼笔记本怎么连接wifi(索尼笔记本怎么样啊)(索尼笔记本怎么进pe)

    索尼笔记本怎么连接wifi(索尼笔记本怎么样啊)(索尼笔记本怎么进pe)

  • 希沃投屏如何使用(希沃投屏怎么投屏图片)

    希沃投屏如何使用(希沃投屏怎么投屏图片)

  • 抖音怎么隐藏视频(抖音怎么隐藏视频简介)

    抖音怎么隐藏视频(抖音怎么隐藏视频简介)

  • 苹果8最适合的ios版本(苹果8最好用)

    苹果8最适合的ios版本(苹果8最好用)

  • 有赞申请退款多久到账(有赞退款退到哪里)

    有赞申请退款多久到账(有赞退款退到哪里)

  • 华为手机花屏显示竖条(华为手机花屏显示竖条无法使用)

    华为手机花屏显示竖条(华为手机花屏显示竖条无法使用)

  • 宽带亮红灯怎么恢复(宽带亮红灯怎么解决)

    宽带亮红灯怎么恢复(宽带亮红灯怎么解决)

  • 微信无法获取地理位置(微信一直显示无法获取您的位置信息)

    微信无法获取地理位置(微信一直显示无法获取您的位置信息)

  • 群主怎么删除别人发的信息(群主怎么删除别人的接龙)

    群主怎么删除别人发的信息(群主怎么删除别人的接龙)

  • tf卡u1和u3的区别(tf卡u1和u3的区别 c10)

    tf卡u1和u3的区别(tf卡u1和u3的区别 c10)

  • oppo手机收音机在哪里(OppO手机收音机在那)

    oppo手机收音机在哪里(OppO手机收音机在那)

  • 淘宝直播推流什么意思(淘宝直播 推流)

    淘宝直播推流什么意思(淘宝直播 推流)

  • 电脑还原系统是不是什么都没有了(电脑还原系统有什么好处)

    电脑还原系统是不是什么都没有了(电脑还原系统有什么好处)

  • 苹果7plus闪光灯怎么设置(苹果7plus闪光灯怎么关闭)

    苹果7plus闪光灯怎么设置(苹果7plus闪光灯怎么关闭)

  • 手机网络变成2g是怎么回事(手机网络变成2G以后恢复不了4G)

    手机网络变成2g是怎么回事(手机网络变成2G以后恢复不了4G)

  • vivoy5s什么时候出的(vivoy5s啥时候上市)

    vivoy5s什么时候出的(vivoy5s啥时候上市)

  • 固态硬盘无法读取怎么回事(固态硬盘无法读写,在pe无法格式化)

    固态硬盘无法读取怎么回事(固态硬盘无法读写,在pe无法格式化)

  • ps怎么处理raw文件(ps怎么处理raw格式)

    ps怎么处理raw文件(ps怎么处理raw格式)

  • OPPO k5有双系统吗(oppok5怎么开双系统)

    OPPO k5有双系统吗(oppok5怎么开双系统)

  • 魅族16s怎么更新系统(魅族16s 更新)

    魅族16s怎么更新系统(魅族16s 更新)

  • 华为手机怎么导出照片(华为手机怎么导入通讯录)

    华为手机怎么导出照片(华为手机怎么导入通讯录)

  • 手机pay支付怎么用(手机pay支付怎么选择银行卡支付)

    手机pay支付怎么用(手机pay支付怎么选择银行卡支付)

  • 荣耀v10怎么卸载程序(荣耀v10怎么卸载系统软件)

    荣耀v10怎么卸载程序(荣耀v10怎么卸载系统软件)

  • 企业微信如何设置打卡(企业微信如何设置管理员)

    企业微信如何设置打卡(企业微信如何设置管理员)

  • 新版爱奇艺影吧在哪(爱奇艺影吧2021)

    新版爱奇艺影吧在哪(爱奇艺影吧2021)

  • 【ChatGPT】阿里版 ChatGPT 突然官宣意味着什么?(阿里pv)

    【ChatGPT】阿里版 ChatGPT 突然官宣意味着什么?(阿里pv)

  • 外出经营是什么意思
  • 差额征税是什么时候出现的
  • 什一税是什么意思?
  • 注册资本没有全额怎么办
  • 进项税额记哪方
  • 工程项目罚款收入账务处理
  • 税务规定先收款后开票,合同约定先收票再付款
  • 累计纳税工资是什么意思
  • 金蝶软件预收账款明细
  • 长期借款工程完工时会计处理怎么做?
  • 废品计入哪个科目
  • 未达起征点的增值税要交所得税吗
  • 这几点政府补助会计新准则值得关注
  • 付款凭证会计分录怎么写
  • 企业的不征税收入用于支出所形成的资产,其计算的折旧
  • 劳务公司的主营业务成本是人工工资需要个人开发票吗?
  • 冲抵货款销售返利会计分录怎么写?
  • 接受捐赠固定资产存货等有相关凭据的其成本按什么确定
  • 经营租赁中出租人发生的初始直接费用是指
  • 享受小型微利企业税收优惠的条件
  • 高新技术企业取消资格的程序
  • 收款收据怎么写 样本
  • 广告费和业务宣传费税前扣除基数
  • 闲置设备怎么处理
  • 预收款交税未开发票申报表怎么
  • 空调应该计入什么科目
  • win10 21h1正式版怎么样
  • linux操作系统文件系统
  • PHP:imageinterlace()的用法_GD库图像处理函数
  • 微信小程序和web端的交互
  • Error in render: “TypeError: Cannot read properties of undefined (reading ‘length‘)“,深层次数据处理报错????
  • yii2前后端分离
  • 公司哪些支出费用可以扣
  • err03 failed to
  • thinkphp3.x连接mysql数据库的方法(具体操作步骤)
  • php写json
  • 一般纳税人使用的是什么会计准则
  • 机票报销需要哪些才可以
  • cvpr2020结果
  • 房产原值是否含增值税
  • 投标保证金属于什么费用
  • ps怎么移动某个图案
  • mongodb简单使用
  • python time.ctime()如何做时间加减法
  • Python中input输入多行文本
  • 不认定为一般纳税人的有哪些
  • 印花税的税率变动
  • 奖金如何做账会计分录
  • 股份支付的账务如何处理?
  • 银行每月贷款额度有多少
  • 低值易耗品费用计入产品成本的方式有哪几种
  • 固定资产计提折旧表
  • 计提福利费是什么意思
  • 将购进的材料用于自制生产用设备
  • 内部往来科目设置在哪类下
  • 备用金的支取流程图
  • 计提人工成本会计分录
  • 购入固定资产一次性扣除政策
  • 不含税价格怎么算公式(1+3%)
  • 融资租入固定资产的入账价值
  • quickres.exe - quickres是什么进程 作用是什么
  • LINUX下的磁盘编辑工具
  • linux如何快速入门
  • sparsomycin
  • perl ne
  • unity3d功能
  • JavaScript中的NaN代表什么
  • 在javascript中如何定义并调用函数
  • shell脚本监控进程
  • jquery移动div
  • 浅谈编码,解码的意义
  • jquery插件开发方法
  • 更改税务购票员
  • 税务要求实名认证
  • 北京交通政务
  • 放管服改革存在的不足
  • 西安养老保险申报
  • 厦门象屿正式员工招聘
  • 外省车险保单,有何不利的事
  • 开票信息哪里查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设