位置: 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助你玩转新世界(创造未来这首歌是谁)

  • 不能跨年
  • 视同销售行为涉税处理?
  • 增值税小规模纳税人购进货物支付的增值税直接计入
  • 注册500万公司实缴多少钱
  • 预缴增值税城建怎么算
  • 税法对固定资产大修理
  • 农产品增值税抵扣新政策2021
  • 银行承兑汇票怎么取钱
  • 房地产企业土地成本分摊方法
  • 报税时其他收入
  • 发放外单位人员奖金 个人所得税
  • 小企业发生销售折让的原因
  • 营改增后新开公司如何报地税?
  • 住宿费的普通发票怎么开
  • 代扣款怎么做账
  • 销售成本结转账务处理
  • 计提递延所得税费用会计分录
  • 制造费用和劳务成本
  • 50万股份分红
  • 有限合伙创投企业
  • 企业收到贷款贴息会计分录
  • 其他应付款冲回计入哪个科目
  • 行纪合同的效力
  • 收到挂靠方应缴纳税款如何做账?
  • macbook怎么修改默认系统
  • linux开启远程ssh
  • 关闭bios启动
  • 去年的发票忘记入账怎么处理
  • gws.exe是啥
  • 企业签订的技术合同
  • Vite + Vue3 +Vant4构建项目时,按需引入使用Toast组件,引用 showToast 时出现编译报错的解决方案
  • 工程项目成本预算表
  • 专项基金设立
  • 互联网行业成本控制现状
  • 进货成本价是什么
  • 帝国cms怎么加自己的名字
  • python字典怎么添加值
  • 采矿权如何进行融资
  • ps像素分辨率什么意思
  • Python打开文件的代码
  • 认缴制下,资金什么时候必须到位
  • 汇算清缴报表填报顺序
  • 财务做帐的金额怎么算
  • 报税残疾人保障费怎么算
  • 公司向法人借款协议
  • 发票超过三个月就不能开了吗
  • 融资租赁的增值税专用发票可不可以抵扣
  • 研发人员工资是实发还是应发
  • 理财中的资产是什么意思
  • 电脑更换显示器需要重装驱动吗
  • 纳税期限与申报期限的区别
  • 应付账款周转率越大说明什么
  • 新税法实施后以前的条例规章作废吗
  • 单位购入车辆能抵扣吗
  • 分批法成本核算对象
  • 残保金是交上一年的吗
  • wp_official_1.1.3.apk软件下载
  • linux@ubuntu
  • ssonsvr.exe - ssonsvr是什么进程
  • win8系统桌面图标
  • rtmanager.exe - rtmanager是什么进程 有什么用
  • window八
  • windows10电脑屏保怎么取消
  • linux入门学习
  • VS2013 OpenGL MFC 编程问题
  • perl随机数
  • 使用androidx 找不到v7
  • 安卓icon图标
  • 在全盘搜索以win
  • shell函数写法
  • unity游戏换皮教程
  • nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
  • javascript基础笔记
  • jquery-easyui-1.3.3
  • javascript的常用例子
  • android实战项目
  • 北京通个人认证
  • 个人所得税税单去哪里打印
  • 上饶二手房契税
  • 湖北职称网上申请流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设