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

  • 如何确定开票税率是否正确
  • 小规模季报利润表本月金额和本年累计金额
  • 维修费开发票选择什么税收分类编码
  • 资产项目有
  • 现金支票提取现金备用
  • 企业拆迁安置房能买吗
  • 什么费用可以列支拆迁补偿费
  • 法院的申请执行费用什么时候收取
  • 增值税专票过了3年能抵扣吗
  • 房屋维修专用发票图片
  • 法律关系三要素表
  • 不征税收入税屋
  • 民非企业补贴收入要缴纳增值税会计分录怎么写?
  • 商会会费收入要交所得税吗
  • 税务局怎么知道你的收入
  • 零申报还需要交税吗
  • 个体工商户出售住房增值税
  • 电商企业收入成本如何核算
  • 小规模纳税人月销售额不超过10万免征
  • 增值税普通发票和专用发票有什么区别
  • 中药材收购需要纳税吗
  • 如何网签三方协议合同
  • 低值易耗品的界定标准何时修改的
  • 生产部门设备折旧费
  • safe software
  • 如何确定赞助对象
  • 若依前后端分离做的系统
  • jetson b01 a02
  • 雷尼尔山位于美国西北部
  • 应收账款项目在资产负债表怎么填列
  • 公司交纳社会保险多少钱
  • 赤狐 (© Yossi Eshbol/Minden Pictures)
  • 预算会计与财务会计适度分离
  • user-interface console 0 指令无效
  • svg symbol
  • 英文描述什么是利润表
  • 个体户转账到法人账户要交税吗
  • 所有者权益变动表怎么填 实例
  • 食品财务走账
  • sql服务无法启动 3417
  • 应交税金科目的核算
  • 普通发票可以扣除吗
  • 借别人账户过钱
  • 公司股权变更如何合理避税
  • 如何计提营业税
  • 接受小规模纳税人的货运服务
  • 租赁收入相关的会计准则
  • 未取得发票能计入在建工程吗
  • 代理公司代缴社保违法吗
  • 公司汽车租赁开什么税目
  • 交易性金融资产的入账价值
  • 本期已认证且不抵扣怎么申报
  • 财务报表的一般构成要素
  • 减值准备包括哪几个方面
  • 已启动申报比对异常怎样才能作废,还没过税期
  • 企业装卸费抵扣怎么做账
  • 总分类账的记账
  • 出纳建账账户名称怎么写
  • sql server怎么改数据
  • mysql通过find_in_set()函数实现where in()顺序排序
  • 微软宣布9款游戏退出XGP订阅
  • win8系统连接网络
  • centos下载与安装
  • 如何使用组策略脚本
  • mac清理所有数据
  • win10怎么取消禁用
  • win11系统ie浏览器
  • windows10 2021预览版
  • 手机弹窗游戏
  • unity ui碰撞
  • unity怎么把文件导入项目
  • 常用的批处理命令
  • python web ui
  • jquery判断div是否显示
  • js倒计时秒杀
  • 生产税净额包含企业所得税吗
  • 煤炭资源税税率表
  • 税务ukey登录界面
  • 出口退税函调管理办法
  • 继承房产过户后可以要求分割吗?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设