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

  • 苹果11与苹果11pro屏幕对比(苹果11与苹果11pro推荐)

    苹果11与苹果11pro屏幕对比(苹果11与苹果11pro推荐)

  • 声卡的主要功能是支持(声卡的主要功能包括哪些)

    声卡的主要功能是支持(声卡的主要功能包括哪些)

  • 电脑屏幕左移了怎么还原(电脑屏幕向左边偏移了)

    电脑屏幕左移了怎么还原(电脑屏幕向左边偏移了)

  • 华为手机信号旁边显示HD什么意思(华为手机信号旁边的爱心是什么)

    华为手机信号旁边显示HD什么意思(华为手机信号旁边的爱心是什么)

  • 苹果没有id怎么下载软件(苹果没有id怎么更新软件)

    苹果没有id怎么下载软件(苹果没有id怎么更新软件)

  • 解析错误是怎么回事(解析错误怎么办)

    解析错误是怎么回事(解析错误怎么办)

  • 5mp是多少像素(12mp+5mp是多少像素)

    5mp是多少像素(12mp+5mp是多少像素)

  • 电脑特别卡换什么硬件(电脑特别卡换什么配置好)

    电脑特别卡换什么硬件(电脑特别卡换什么配置好)

  • u盘几十年不用东西会丢吗(u盘很多年不用会坏吗)

    u盘几十年不用东西会丢吗(u盘很多年不用会坏吗)

  • 手机puk密码是什么(手机puk原始密码是多少八位)

    手机puk密码是什么(手机puk原始密码是多少八位)

  • 多个连续文件选择步骤(多个连续的文件按哪个键)

    多个连续文件选择步骤(多个连续的文件按哪个键)

  • 苹果双卡双待手机可以用两个微信吗(苹果双卡双待手机流量怎么切换)

    苹果双卡双待手机可以用两个微信吗(苹果双卡双待手机流量怎么切换)

  • vivo微信美颜功能设置(vivo微信美颜功能)

    vivo微信美颜功能设置(vivo微信美颜功能)

  • 微信出行历史在哪(微信出行历史怎么看)

    微信出行历史在哪(微信出行历史怎么看)

  • 微信如何判断对方已读(微信如何判断对方已读信息)

    微信如何判断对方已读(微信如何判断对方已读信息)

  • 显示适配器有两个怎么切换(显示适配器有两个一个有感叹号)

    显示适配器有两个怎么切换(显示适配器有两个一个有感叹号)

  • 苹果蓝牙耳机怎么调音量(苹果蓝牙耳机怎么连)

    苹果蓝牙耳机怎么调音量(苹果蓝牙耳机怎么连)

  • ⅴivo手机x27可以无线充电吗(vivox27支持4g+吗)

    ⅴivo手机x27可以无线充电吗(vivox27支持4g+吗)

  • 如何在Excel中使用组合框控件(在excel中如何用)

    如何在Excel中使用组合框控件(在excel中如何用)

  • 红米k20的nfc怎么用(红米k20pnfc怎么用)

    红米k20的nfc怎么用(红米k20pnfc怎么用)

  • vivoy93指纹在哪(vivoy93手机指纹锁在哪里)

    vivoy93指纹在哪(vivoy93手机指纹锁在哪里)

  • 电脑屏幕卡住了按什么都没反应(电脑屏幕卡住了按什么都没反应怎么办)

    电脑屏幕卡住了按什么都没反应(电脑屏幕卡住了按什么都没反应怎么办)

  • 王者荣耀进不去怎么办?原因是什么?(王者荣耀进不去怎么回事最新)

    王者荣耀进不去怎么办?原因是什么?(王者荣耀进不去怎么回事最新)

  • Nodejs快速搭建简单的HTTP服务器,并发布公网远程访问(node.js环境搭建)

    Nodejs快速搭建简单的HTTP服务器,并发布公网远程访问(node.js环境搭建)

  • 【Java面试】带你从面试官的角度深入剖析,什么是Java虚拟机为什么要使用?(java面试相关)

    【Java面试】带你从面试官的角度深入剖析,什么是Java虚拟机为什么要使用?(java面试相关)

  • 个税手续费返还要交企业所得税吗
  • 非税收入未上缴
  • 医院能否开具增值税专用发票
  • 计量的政府补助是什么
  • 土建工程维修
  • 没有达到起征点的工资忘计申报个税,可以税前扣除吗
  • 国有资本及权益客观增减因素
  • 发票分开开票
  • 电子承兑背书失败是怎么回事
  • 购买软件的增值税可以抵扣吗
  • 技术服务开什么大类
  • 实收资本账簿印花税需要每年交吗
  • 增值税减征方式有哪些?
  • 发票已认证部分怎么撤销
  • 营改增对固定资产的影响
  • 按季申报是什么意思
  • 个体纳税申报核定销售额填不填
  • 为什么公司信用代码不对
  • 限售股转让所得
  • 收到政府补贴要交增值税吗
  • 增长率应该要如何计算呢?
  • 从租计征的税率
  • 预缴税金跨区域涉税在哪查询
  • 其他债权投资通俗
  • 如何调整往来账款
  • php技巧
  • echarts纵坐标加单位
  • php实现搜索的方式
  • 无形资产入账价值包括资本化支出吗
  • php 银行卡支付
  • 医疗知识科普图片
  • 珠宝行业会计核算内容
  • 安装libtool
  • 以前年度收入如何调账
  • 空调入固定资产几年折旧
  • sqlserver2005安装步骤教程
  • 土石方费用入什么科目
  • 小规模增值税减按1%的政策
  • 增值税普通发票几个点
  • 公司银行销户钱转到哪里去
  • 开增值税专票要交税吗
  • SQL Server通过重建方式还原master数据库
  • Table ‘xxx’ is marked as crashed and should be repaired 错误解决方法参考
  • 什么是全面一次性奖金
  • 劳务费怎么要的回来
  • 什么公司可以核定企业所得税
  • 政府补助怎么记账
  • 公司转账转错账户
  • 发给客户免费的短信
  • 劳务公司成本核算方法一般选择哪个
  • 公司购买的五金怎么入账
  • 企业购置生产要素所引起的本钱炜
  • 支付上月采购货款
  • 新办企业在建期间账务处理
  • 一般性企业
  • 交易性金融资产包括哪些项目
  • win8系统怎么关机
  • win10右键菜单自定义
  • 获取mac命令
  • win7旗舰系统
  • win10聚焦功能失效
  • win7怎么提升电脑性能
  • 安卓闹钟软件下载
  • opengl learn
  • android studio jni
  • python中的文件读写
  • 动作
  • jqueryui
  • material design app
  • android开发中遇到的问题
  • ja开发
  • jquery 列表控件
  • js中的eval
  • 七牛云和ucloud
  • jQuery Ajax 上传文件处理方式介绍(推荐)
  • 税务局分类分级
  • 定额发票属于什么类型
  • 纳税申报期限和税款缴纳期限一样吗
  • 济南税务局,济南电子税务局官网
  • 今年烟草税多少钱
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设