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

  • 微信头像换了对方怎么还显示原来的(微信头像换了对方多久显示)

    微信头像换了对方怎么还显示原来的(微信头像换了对方多久显示)

  • 打印机不能初始化是怎么回事(打印机不能初始化是什么意思)

    打印机不能初始化是怎么回事(打印机不能初始化是什么意思)

  • 微信绿码在哪里找(微信中绿码在哪里)

    微信绿码在哪里找(微信中绿码在哪里)

  • 美图秀秀视频拼图时为什么没有原音(美图秀秀视频拼接怎么做无缝隙)

    美图秀秀视频拼图时为什么没有原音(美图秀秀视频拼接怎么做无缝隙)

  • 微信朋友圈发广告会封吗(微信朋友圈发广告为什么会折叠)

    微信朋友圈发广告会封吗(微信朋友圈发广告为什么会折叠)

  • 抖音没有权限设置怎么回事(抖音里的权限设置为什么突然没有了)

    抖音没有权限设置怎么回事(抖音里的权限设置为什么突然没有了)

  • 网络断了连不上网是什么原因(网络断了连不上网怎么办)

    网络断了连不上网是什么原因(网络断了连不上网怎么办)

  • 抖音直播定位修改会限流吗(抖音直播定位修改器)

    抖音直播定位修改会限流吗(抖音直播定位修改器)

  • 华为p40单卡还是双卡(华为p40单卡还是双卡好用)

    华为p40单卡还是双卡(华为p40单卡还是双卡好用)

  • 一个路由器可以连接几台电视(一个路由器可以连接几台电脑)

    一个路由器可以连接几台电视(一个路由器可以连接几台电脑)

  • 快手私信显示当前在线什么意思(快手私信显示当前在线是对方还是自己)

    快手私信显示当前在线什么意思(快手私信显示当前在线是对方还是自己)

  • iphonexs是几核处理器(xs是几核处理器)

    iphonexs是几核处理器(xs是几核处理器)

  • 电视机存储内存大小有啥影响(电视机存储内存多大合适)

    电视机存储内存大小有啥影响(电视机存储内存多大合适)

  • 手机后盖缝隙多大算正常(手机后盖缝隙多大)

    手机后盖缝隙多大算正常(手机后盖缝隙多大)

  • 光路认证失败什么意思(光路认证失败什么原因)

    光路认证失败什么意思(光路认证失败什么原因)

  • 滴滴快车预付款能退吗(滴滴快车预付款怎么取消)

    滴滴快车预付款能退吗(滴滴快车预付款怎么取消)

  • Reno Ace的SOS紧急联络怎么用(设置sos紧急)

    Reno Ace的SOS紧急联络怎么用(设置sos紧急)

  • 手机4g变成2g怎么恢复(手机4g变成2g怎么恢复设置)

    手机4g变成2g怎么恢复(手机4g变成2g怎么恢复设置)

  • 小米mix3能用36w快充吗(小米mix3能用6a数据线吗)

    小米mix3能用36w快充吗(小米mix3能用6a数据线吗)

  • 淘宝已处理的评价怎么删除(淘宝已处理的评价是怎么回事影响淘宝号吗)

    淘宝已处理的评价怎么删除(淘宝已处理的评价是怎么回事影响淘宝号吗)

  • 用有信打电话会显示自己号码吗(用有信打电话能查出来了吗)

    用有信打电话会显示自己号码吗(用有信打电话能查出来了吗)

  • 腾讯视频是否夜间审核(腾讯视频是否夜间播放)

    腾讯视频是否夜间审核(腾讯视频是否夜间播放)

  • 笔记本电脑加固态硬盘(笔记本电脑加固态还能保修吗)

    笔记本电脑加固态硬盘(笔记本电脑加固态还能保修吗)

  • vivox27录音功能在哪(vivox27手机录音)

    vivox27录音功能在哪(vivox27手机录音)

  • ipadpro11和10.5区别(ipad pro10.5和pro11)

    ipadpro11和10.5区别(ipad pro10.5和pro11)

  • 正确启用BIOS显卡的启动顺序有效预防电脑黑屏困扰(bios设置启动顺序(图解说明))

    正确启用BIOS显卡的启动顺序有效预防电脑黑屏困扰(bios设置启动顺序(图解说明))

  • el-card多个卡片布局(e卡 叠加)

    el-card多个卡片布局(e卡 叠加)

  • 使用Python实现一个堆栈结构(利用python)

    使用Python实现一个堆栈结构(利用python)

  • 全国增值税发票查验平台入口
  • 股东向公司借款超过一年不还
  • 零税率是指
  • 项目差旅费能计入项目费用吗
  • 限定性净资产账务处理
  • 小微企业免税销售额是按1%还是3%
  • 出差补贴要不要发票
  • 运输费全额抵扣什么意思
  • 计提工资时金额是应发工资还是实发工资
  • 员工宿舍买热水器计入什么费用
  • 其他应付款在借方资产负债表怎么填
  • 融资租入固定资产的入账价值
  • 银行日记账写错了怎么改
  • 残疾证挂靠一年多少钱
  • 资产总额季度平均
  • 研发费用的社保怎么做
  • 转让旧房增值税计税依据
  • 跨年冲减费用
  • 租赁厂房发生的改造装修费用
  • 民事诉讼的适用范围和基本制度
  • 结算纪律与法律责任表格
  • 查账征收企业所得税年度申报
  • 清洁费免税吗
  • 水利建设专项收入的税率是多少?
  • 啤酒消费税的计税基础
  • 提高主营业务收入的意义
  • 几年前的美元现在值钱吗
  • 安全生产费怎么算
  • 局域网内如何设置静态ip
  • win11任务栏如何设置在最左边
  • 应用程序发生异常 未知的软件异常(0xe06d7363)
  • win10怎么删除电脑开机密码设置
  • php curl post请求
  • dotnetfx35.exe
  • yii gridview
  • 大西洋跟太平洋有没有融为一体?
  • 进项发票认证后怎么做账
  • 请问怎么清除
  • windows11安装ubuntu20.04
  • php中文出现乱码
  • 小微企业怎么给员工交保险
  • 怎样创建一个网站
  • 补提所得税费用可以直接计入当期
  • vue的slice
  • 麻雀优化算法和鲸鱼算法哪个好
  • 【机器学习】前置知识:矩阵的表示与定义 | Identity 身份矩阵 | 逆矩阵和转置 | 标量乘法
  • 固定资产租赁费属于什么费用
  • 规模以上企业纳税要求
  • sql 覆盖索引
  • 从农业生产者购进农产品
  • 货款必须对公帐户支付吗
  • 私车公用维修费用谁出
  • 合营企业和联营企业是关联方吗
  • 增值税会计账务处理例题
  • 定期定额个体经营所得税申报错了怎么办
  • 利润表中的资产处置收益应该计入营业利润还是利润总额
  • 上期计提的费用怎么入账
  • 未取得发票该怎么说明
  • 住宿费开的增值税专用发票怎么记账
  • 社保补差什么流程
  • 企业购买黄金该交什么税
  • 发票几个月内可以红冲
  • 餐费补贴属于工资还是福利费
  • 新收入准则要求
  • 会计总账怎么做账
  • winxp系统开机启动项
  • windows打不开添加打印机
  • 解决win10蓝屏
  • mac10.10.5无法升级
  • linux CentOS WEB服务器分区方案
  • win8功能
  • 蓝牙鼠标不能动了
  • javascript括号
  • vue父子组件之间的通讯
  • 文件管理android访问限制
  • unity2d角色换装
  • 使用SQLite本地数据库
  • 深圳国税地税怎么申报
  • 综治中心能取代公务员吗
  • 个人所得税减免申报操作流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设