位置: IT常识 - 正文

文本超出部分显示省略号(文本超出单元格)

编辑:rootadmin
文本超出部分显示省略号

推荐整理分享文本超出部分显示省略号(文本超出单元格),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:文本超出部分显示怎么办,文本超出部分显示怎么弄,文本超出显示为省略号,文本超出部分显示怎么弄,文本超出部分显示怎么弄,文本超出显示末尾 多标签,文本超出部分显示怎么办,文本超出部分显示,内容如对您有帮助,希望把文章链接给更多的朋友!

我们经常在网站上可以看到以下样式,标题太长,一行显示不下,则会使用省略号来代替。但是事实上,这个省略号并不是打字打上去的,而是使用代码表示出来的。

今天则主要介绍如何让文本超出部分显示省略号。

1.单行文本超出部分显示省略号1.1 语法<style> .box { width: 400px; height: 30px; border: 1px solid red; /*第一步: 溢出隐藏 */ overflow: hidden; /* 第二步:让文本不会换行, 在同一行继续 */ white-space: nowrap; /* 第三步:用省略号来代表未显示完的文本 */ text-overflow: ellipsis; }</style><body> <h3 class="box"> 生活如此美好,我们要积极面对,迎难而上,没有什么是过不去的坎,坚持就是胜利! </h3></body>

具体效果如下:

 1.2 具体步骤

①第一步: 溢出隐藏 —— overflow: hidden;

②第二步:让文本不会换行, 在同一行显示——white-space: nowrap;

文本超出部分显示省略号(文本超出单元格)

③第三步:用省略号来代表未显示完的文本 ——text-overflow: ellipsis;

2. 多行超出部分显示省略号

在实际中,除了上面那种单行省略号以外,还有这种在第二行甚至更多行后,超出部分的文字再显示省略号。

2.1 语法 <style> .box { /* 限定范围 */ width: 300px; height: 40px; border: 1px solid red; /* 1.溢出隐藏 */ overflow: hidden; /* 2.用省略号来代替超出文本 */ text-overflow: ellipsis; /* 3.设置盒子属性为-webkit-box 必须的 */ display: -webkit-box; /* 4.-webkit-line-clamp 设置为2,表示超出2行的部分显示省略号,如果设置为3,那么就是超出3行部分显示省略号 */ -webkit-line-clamp: 2; /* 5.字面意思:单词破坏:破坏英文单词的整体性,在英文单词还没有在一行完全展示时就换行 即一个单词可能会被分成两行展示 */ word-break: break-all; /* 6.盒子实现多行显示的必要条件,文字是垂直展示,即文字是多行展示的情况下使用 */ -webkit-box-orient: vertical; }</style><body> <div class="box"> 生活不易,且行且珍惜。待人多点耐心,不要急急燥燥,对自己也宽容点,不要过分为难自己,活着开心就好! </div></body>

具体效果如下:

2.2 具体步骤

①第一步: 溢出隐藏 —— overflow: hidden;

②第二步:用省略号来代表未显示完的文本 ——text-overflow: ellipsis;

③第三步:必须设置盒子属性为-webkit-box——display: -webkit-box;

④第四步:设置超出几行后,超出部分显示省略号,比如-webkit-line-clamp:2;,则表示超出2行的部分显示省略号,如果设置为3,那么就是超出3行部分显示省略号 

⑤第五步:单词破坏:主要用于破坏英文单词的整体性,即在英文单词还没有在一行完全展示时就换行,简单的理解就是一个单词可能会被分成两行展示——word-break: break-all;

⑥第六行:盒子实现多行显示的必要条件,文字垂直展示——-webkit-box-orient: vertical;

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

上一篇:ChatGPT教你怎么样论文写的又快又好(chat怎么用)

下一篇:ChatGPT创造的未来:150+个Prompts助你玩转新世界(创造未来这首歌是谁)

  • 增值税查询校验码是什么
  • 含13%的增值税怎么算
  • 如何成为一般纳税人的条件
  • 出口货物备案单证目录在哪里
  • 金税四期接入银行
  • 营运资产周转次数平均值
  • 出纳发票不见了可以用微信转账记录记账吗
  • 资金账簿印花税最新政策2022年
  • 城建税 小规模
  • 其他业务收入在借方表示什么
  • 企业管理费可以扣除吗
  • 每天现金日记账登记完以后应怎么对账
  • 组织投标工作
  • 所得税审核费计入什么科目
  • 免费的企业
  • 员工就诊发票可以报销吗
  • 增值税专票销货清单模板
  • 公司厂房出租发票怎么开
  • 工程施工企业人工成本最高多少
  • 企业挂靠税收市收取的标准是什么
  • 增值税专用发票有效期是多长时间
  • 设备维保费税率怎么算
  • 计提附加税的会计分录
  • 餐饮行业纳税指引及营改增后税负变化!
  • 广告支持政策
  • 购买汽车车辆购置税个人垫付,企业付给个人的附件归属
  • 地方教育附加什么时候交
  • 应交税费核算
  • 记账金额如何处理账户
  • 合同作废印花税法规定
  • php curl post请求
  • mc office是什么意思
  • vue 首页
  • 企业存货期末应如何计价
  • 低值易耗品是怎样的
  • php如何删除数组元素
  • 留抵税额进项构成比例
  • zen框架
  • thinkphp教程
  • 二手车交易发票怎么收费
  • 增值税附加税减免政策2022年
  • 电缆租赁发票开具属于什么项目
  • 个人接受现金捐赠的情况
  • 企业向个人借款利息如何缴纳增值税
  • 母公司为子公司提供担保是利好吗
  • 非金融企业借款利息收入计入什么科目
  • 自产产品用于内部使用
  • 应交税费已交税金是什么意思
  • 发票开错抬头做红字发票的账务处理是?
  • 发票联遗失的证明怎么开
  • 业务招待费的列支范围
  • 零余额账户银行回单
  • 当月作废的采购发票已认证账务如何处理?
  • 工程怎么做会计分录
  • 年底结转损益后如何结转
  • 收购发票使用范围及预警怎么写
  • 购进货物用于集体福利会计分录
  • 注销企业基本户销户规定
  • SQL Server2005、2008如何彻底删除卸载并重新安装?
  • 苹果电脑怎么锁文件夹
  • ubuntu 12.04 intel集成显卡设置分辨率的步骤分享
  • xboxone系统更新错误
  • react native 应用
  • js闭包的理解详解
  • 一个项目引多个项目
  • 脚本语言教程
  • Cocos2dx CCLabelAtlas字体与CCLabelTTF字体的使用方法
  • Node.js中的全局变量有哪些
  • td nowrap css nowrap使用说明于注意事项
  • unity strangeioc
  • jquery ajax后台返回list,前台用jquery遍历list的实现
  • js最简单的代码
  • js函数全局变量
  • 学完js不会用怎么办
  • js浮动窗口
  • 安卓怎么压缩
  • 安徽省电子发票开具流程
  • 党员参观红色教育基地活动的意义
  • 教师十三薪是什么意思
  • 取得土地使用权后两年未开发
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设