位置: IT常识 - 正文

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

发布时间:2024-01-17
文本超出部分显示省略号

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

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

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

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

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

  • 隔空投送怎么操作(隔空投送怎么操作荣耀)

    隔空投送怎么操作(隔空投送怎么操作荣耀)

  • 小米civi支持无线充电吗(小米civi有没有无线充电)

    小米civi支持无线充电吗(小米civi有没有无线充电)

  • windows是什么意思(windows是什么意思电脑)

    windows是什么意思(windows是什么意思电脑)

  • 如何升级bios(华硕主板如何升级bios)

    如何升级bios(华硕主板如何升级bios)

  • 为什么下载速度很慢(为什么下载速度只有10m)

    为什么下载速度很慢(为什么下载速度只有10m)

  • 系统u盘多大合适(系统u盘有多大)

    系统u盘多大合适(系统u盘有多大)

  • 抖音没有公会提成多少(抖音直播没有公会提成在哪里查看)

    抖音没有公会提成多少(抖音直播没有公会提成在哪里查看)

  • 拼多多人脸验证没反应(拼多多人脸验证怎么关闭)

    拼多多人脸验证没反应(拼多多人脸验证怎么关闭)

  • 拉黑后放出对方知道吗(拉黑放出来又拉黑对方知道吗)

    拉黑后放出对方知道吗(拉黑放出来又拉黑对方知道吗)

  • qq爱为什么听不了(歌曲qq爱怎么没了)

    qq爱为什么听不了(歌曲qq爱怎么没了)

  • 抖音可以看到在线状态吗(抖音可以看到在哪里吗)

    抖音可以看到在线状态吗(抖音可以看到在哪里吗)

  • 爱奇艺账号注销后还会自动续费吗(爱奇艺账号注销冻结多久)

    爱奇艺账号注销后还会自动续费吗(爱奇艺账号注销冻结多久)

  • 快手B类包括什么(快手b类对账号有影响吗?)

    快手B类包括什么(快手b类对账号有影响吗?)

  • 8p屏幕c11和c3f通用吗(8p区分屏幕c11和c3f通用吗)

    8p屏幕c11和c3f通用吗(8p区分屏幕c11和c3f通用吗)

  • 电脑上小键盘怎么打开(电脑上小键盘怎么计算)

    电脑上小键盘怎么打开(电脑上小键盘怎么计算)

  • ctrl+c是什么快捷键

    ctrl+c是什么快捷键

  • 电脑没网怎么连接手机热点(电脑没网怎么连接打印机)

    电脑没网怎么连接手机热点(电脑没网怎么连接打印机)

  • 哈罗单车为什么扫不了(哈罗单车为什么显示该车不可用)

    哈罗单车为什么扫不了(哈罗单车为什么显示该车不可用)

  • xsmax双卡双待怎么弄(xsmax双卡双待怎么装)

    xsmax双卡双待怎么弄(xsmax双卡双待怎么装)

  • 华为p30开发者选项在哪(华为P30开发者选项在哪里打开)

    华为p30开发者选项在哪(华为P30开发者选项在哪里打开)

  • 扣扣黑名单在哪儿(扣扣黑名单在哪里找到苹果手机)

    扣扣黑名单在哪儿(扣扣黑名单在哪里找到苹果手机)

  • vivo手机怎么在首页显示时间(vivo手机怎么在电视上投屏)

    vivo手机怎么在首页显示时间(vivo手机怎么在电视上投屏)

  • 电脑图片格式有哪些(电脑里图片的格式是什么)

    电脑图片格式有哪些(电脑里图片的格式是什么)

  • 拼多多怎么看货到哪了(拼多多怎么看货款总额)

    拼多多怎么看货到哪了(拼多多怎么看货款总额)

  • npm sill idealTree buildDeps 安装踩坑指南(详细版)

    npm sill idealTree buildDeps 安装踩坑指南(详细版)

  • 苹果补充更新macOS Catalina10.15.7版本(mac更新内容)

    苹果补充更新macOS Catalina10.15.7版本(mac更新内容)

  • 小规模纳税人销售已使用固定资产
  • 结转本月完工入库产品制造成本,甲产品800台全部完工
  • 城镇土地使用税纳税义务发生时间
  • 航空公司开具的个人抬头的发票可以税前扣除吗
  • 员工回家探亲的文案
  • 金税盘怎样查询已开发票明细
  • 油补是福利费还是工资
  • 增值税纳税申报表附列资料(三)
  • 季度所得税申报错误,一定要更改吗
  • 一般纳税人加计抵减申报表怎么填
  • 收回已核销的坏账什么意思
  • 收到生育津贴会计分录怎么做
  • 公司卖车怎么开公司发票
  • 应付职工薪酬包括哪些内容
  • 出纳需要填哪些表
  • 公司注销后款未收完怎么办
  • 记账凭证填制的内容
  • 购房时收取的卖方费用
  • 进口商品的关税计入入账价值吗
  • 赠送礼品的具体做法有许多技巧和讲究大致涉及
  • 卖护肤品赚钱吗
  • 兼营行为的含义
  • 如何修改mac系统密码
  • 电脑怎么更新系统日期
  • 普通发票多久之后还可以红冲
  • mac如何打电话
  • PHP:session_destroy()的用法_Session函数
  • ros call
  • Vue Grid Layout -️ 适用Vue.js的栅格布局系统(保姆级使用教程)
  • zendstudio怎么创建php项目
  • 增值税核算应采用什么科目
  • re.findall()用法
  • 已确认的发票如何入账
  • thinkphp5框架介绍
  • vue自定义页面
  • 2023年重庆邮电大学研究生分数线
  • 侧边导航栏点击后再展开
  • angular 初学者快速上手教程
  • sta翻译中文
  • python字典删除键值对方法
  • 自贸区的税收优惠
  • mongodb数据表设计怎么写
  • 免费开源okr管理系统
  • 专项应付款 会计分录
  • 其他收益属于什么类科目
  • 高新技术企业支付特许权使用费
  • 技术服务收入包括哪些
  • 享受优惠政策的通知
  • 成本法和权益法的转换
  • 公司提供给员工暂借款未还款离职
  • 管理成本分摊比例是多少
  • 生产性生物资产账务处理
  • 其他权益工具是所有者权益类科目吗
  • 企业利润怎么算出来的
  • sql语句优化总结
  • mysql优化步骤
  • mysql服务1067进程意外终止
  • 英文版的windows
  • 光盘pe系统
  • centos 查看文件夹
  • windows8进入桌面
  • mac电池不能被识别吗
  • 如何将win10系统从c盘迁移到d盘
  • win7怎么禁止网络连接
  • cortanawin10在哪
  • win8.1开始菜单怎么改成win7那样
  • win10登陆背景修改器
  • win10系统中怎么设置搜狗输入
  • jquery禁止点击事件
  • ExtJS4 Grid改变单元格背景颜色及Column render学习
  • 网页设计中css样式有何用途
  • unity3d官方教程
  • app录音功能开发
  • shell脚本中判断入参是否为空
  • js实现超精简的快捷键
  • python编程基础语法
  • python 系统日期
  • 票种核定和税种核定的区别
  • 上海国家税务局官网发票查验平台
  • 服务承诺口号八个字
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号