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

  • 苹果12home键在哪里设置(苹果14手机电源键在哪)

    苹果12home键在哪里设置(苹果14手机电源键在哪)

  • uplay是什么(Uplay是什么软件)

    uplay是什么(Uplay是什么软件)

  • 来电不显示号码怎么设置(来电不显示号码只显示未知号码)

    来电不显示号码怎么设置(来电不显示号码只显示未知号码)

  • 罗马仕充电宝充电时就第一个灯闪怎么解决(罗马仕充电宝充不了电)

    罗马仕充电宝充电时就第一个灯闪怎么解决(罗马仕充电宝充不了电)

  • 苹果11突然没声音(苹果11突然没声音按哪个键)

    苹果11突然没声音(苹果11突然没声音按哪个键)

  • 取消拉黑后能收到之前的短信吗(取消拉黑后能收到之前的微信吗)

    取消拉黑后能收到之前的短信吗(取消拉黑后能收到之前的微信吗)

  • 格式化电脑会将系统重装吗(格式化电脑会不会影响到win10)

    格式化电脑会将系统重装吗(格式化电脑会不会影响到win10)

  • 抖音消息能看到已读未读吗(抖音消息能看到对方已读吗)

    抖音消息能看到已读未读吗(抖音消息能看到对方已读吗)

  • 闲鱼只能发布50个怎么办(闲鱼只能发布50个吗)

    闲鱼只能发布50个怎么办(闲鱼只能发布50个吗)

  • 苹果手机充电有麻的感觉正常吗(苹果手机充电有液体怎么回事)

    苹果手机充电有麻的感觉正常吗(苹果手机充电有液体怎么回事)

  • 11是双卡双待吗(nova11是双卡双待吗)

    11是双卡双待吗(nova11是双卡双待吗)

  • 网络适配器多路传送器协议打钩吗(网络适配器多路传输协议勾选无效)

    网络适配器多路传送器协议打钩吗(网络适配器多路传输协议勾选无效)

  • 手机版优酷怎么录视频(手机版优酷怎么扫码登录的二维码在哪)

    手机版优酷怎么录视频(手机版优酷怎么扫码登录的二维码在哪)

  • iphonex和11pro屏幕一样大吗(iphonex和11pro屏幕大小一样吗)

    iphonex和11pro屏幕一样大吗(iphonex和11pro屏幕大小一样吗)

  • 安卓手机怎样连接u盘(安卓手机怎样连接苹果耳机)

    安卓手机怎样连接u盘(安卓手机怎样连接苹果耳机)

  • 苹果手机通话记录删除了怎么恢复(苹果手机通话记录怎么只有几天的)

    苹果手机通话记录删除了怎么恢复(苹果手机通话记录怎么只有几天的)

  • bizmsg文件是什么意思(biom文件)

    bizmsg文件是什么意思(biom文件)

  • Win10没有投影到这台电脑功能(win没有投影到此电脑怎么办)

    Win10没有投影到这台电脑功能(win没有投影到此电脑怎么办)

  • win10兼容性如何(win10兼容性在哪里调整)

    win10兼容性如何(win10兼容性在哪里调整)

  • win10右键菜单管理打不开(win10右键菜单管理在哪打开)

    win10右键菜单管理打不开(win10右键菜单管理在哪打开)

  • 安全模式到底是什么?有啥作用?(安全模式是个啥)

    安全模式到底是什么?有啥作用?(安全模式是个啥)

  • vite基础使用及相关配置(vit详解)

    vite基础使用及相关配置(vit详解)

  • 百旺金税盘官网
  • 统一机构信用代码查询系统
  • 租厂房需要交租赁税吗
  • 小规模季度30万免税
  • 销售人员的工资属于什么会计科目
  • 知道含税价,税率,怎么算税金
  • 公司股份无偿转让怎么办理流程
  • 电子发票丢失如何税前扣除
  • 建筑施工企业的法定代表人对本企业的安全生产负责
  • 汇总记账凭证长什么样
  • 第三方代缴社保算工龄吗
  • 物业公司需要向哪个部门缴费
  • 超市商品打折怎么算出来
  • 应收账款的借方表示增加还是减少
  • 物业要交多少钱
  • 小规模纳税人的税率是多少(含国、地税)
  • 公司获得投资
  • 公司个人所得税怎么申报
  • 协会会费入账科目是哪个
  • 居民企业之间以非货币资产进行投资
  • 收代扣代缴个税手续费会计分录
  • 实发工资需扣除所得税吗
  • 进料加工分配率是什么意思
  • 担保贷款造成的损失可以税前扣除吗?
  • 事业单位服务收入怎么做账
  • 金税盘减免税款怎么结转
  • 会计分录中结转是什么意思
  • 购买固定资产发生的支出是资本性支出
  • win10怎么删除电脑开机密码设置
  • scheduler.exe - scheduler是什么进程 有何作用
  • 广告费属于什么费用部门
  • php教程 ftp 函数
  • 境外资金购买境内物业
  • 年终奖一般发什么奖品
  • 如何挽留婚姻危机
  • 消费税计算包括关税吗
  • phpexcel插件
  • 新能源产业发展历程
  • yolox改进
  • 劳动仲裁支付的个人款项怎么做账
  • 施工图审查费属于什么费用类别
  • python复制文件的代码
  • sql实例命名规则
  • dedecms插件
  • 公司做的样品展示怎么入账
  • 资产负债表第二年怎么填
  • sqlserver2012安装好了桌面没有图标
  • sql 列转行
  • 费用可以抵扣什么税
  • 企业清算是怎么做账的
  • 售后回租会计准则
  • 有限合伙企业分红原则
  • 房地产开发企业会计制度
  • 财政补助收入的支付制度包括
  • 公司给员工租房没有发票怎么入账
  • 小规模纳税人年收入不能超过多少
  • 赠送设备如何做账务处理
  • 年中重新建账还要年初数吗?
  • 使用筷子就餐会不会传染乙肝病毒
  • sqlserver存储过程怎么查看
  • mysql获取日期年份
  • sql2000数据库怎么使用
  • ubuntu20.04挂载
  • Mac OSX通过homebrew卸载formula的方法
  • 电脑自建热点
  • 魔方优化大师是免费的吗
  • culauncherexe是什么进程
  • win10安装office2016无法注册字体可以忽略吗?
  • linux 卸载 mysql
  • shell案例讲解
  • python怎样升级
  • android监听app启动
  • python 钉钉打卡定位
  • python面积
  • 北京税务举报投诉
  • 留抵税额退税政策2022
  • 重庆投诉平台电话
  • 税务稽查立案标准金额
  • 税收收入弹性值
  • 临时工和季节工需要交社保吗合法吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设