CSS3属性之text-overflow:ellipsis详解

news2024/12/27 13:26:16

1.text-overflow:
默认值:clip;

适用于:所有元素

clip:当前对象内文本溢出时不显示省略标记(…),而是将溢出部分裁剪。

ellipsis:当对象内文本一处时显示省略标记(…)。
当然这还是不够的,需要加点调料才能出现效果:

那就是配合

overflow:hidden

white-space:overflow;
在这里插入图片描述
2.这时候BT的产品经理来了,小鹏啊~一行省略怎么行,变成三行出现省略。

处理办法:
将white-space去除,并且加上:
display:-webkit-box;
-webkit-line-clamp: 3/第几行裁剪/
-webkit-box-orient:vertical;

-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。 常见结合属性:
2-1.display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
2-2.-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
2-3.text-overflow: ellipsis; ,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。

在这里插入图片描述
3.这时候测试员来了,你这IE不能正常显示(天煞IE)

如何兼容IE:使用jq插件实现。

效果图:
在这里插入图片描述

插件网站:http://dotdotdot.frebsite.nl/
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/160915.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

高级树结构之红黑树初识

文章目录一 红黑树简介二 探究变色、旋转操作的时机三 总结一 红黑树简介 通过在插入几点时维护数的平衡,这样就不会出现极端情况,使得整棵树的查找效率急剧降低。但是这样造成系统开销过大,因为一旦平衡因子的绝对值超过一就失衡&#xff0…

iOS 界面尺寸居然跟实际机型不符!

0x00 前言 日常搬砖过程中,一条日志,让我对手里的 iPhone 6 Plus 产生了怀疑? 这是 6P,怎么尺寸变成 6 了呢? 0x01 对比 手机连上电脑,通过 Xcode 查看 Window 菜单:Devices and Simulators …

Insight Enterprises EDI 855 采购订单确认报文详解

本文着重讲述Insight EDI项目中Insight回复给采购商的X12 855报文(采购订单确认)。 在此前的文章如何读懂X12报文中,我们对X12报文的结构已经做了详细的介绍,本文将带大家深入了解X12 855采购订单确认报文。 下图为Insight X12 …

单绞机张力开环控制(绞臂行星差速机构)

PLC的开环和闭环张力控制算法,可以参看下面的文章链接: PLC张力控制(开环闭环算法分析)_plc张力控制程序_RXXW_Dor的博客-CSDN博客里工业控制张力控制无处不在,也衍生出很多张力控制专用控制器,磁粉制动器等,本篇博客主要讨论PLC的张力控制相关应用和算法,关于绕线机的…

Java学习之final关键字

目录 一、基本介绍 二、使用final的四种情况 第一种 第二种 第三种 第四种 三、细节 第一点 第二点 第三点 第四点 第五点 第六点 第七点 第八点 第九点 四、练习 第一题 第二题 分析 一、基本介绍 final:最终的,最后的 final 可以修饰类…

图形编辑器:旋转选中的元素

大家好,我是前端西瓜哥。 最近更文比较少,是因为本人在做个人开源项目,用 Canvas 做一个设计工具,做个乞丐版 figma。期间遇到了不少问题,在这里记录一下。 今天开始会恢复高频更新的,一两天一更。内容主…

Linux网络服务管理防火墙详解端口问题

每次配置访问服务器都会一团迷雾,今天来尝试弄清楚同时借鉴一下大佬的博文当做笔记 文章目录防火墙简介一、防火墙基础二、iptables防火墙策略iptables 命令格式:iptables案例1.查看开放的端口2.开放端口(此处以80端口为例)3.关闭…

超级详细的PMP复习方法,3A拿下考试不发愁!

如果问我是怎么一次性通过考试的,那绝对不只是运气,没有一点基本的实力怎么有底气通过考试呢,所以今天我们不讲什么刷题技巧,基础不牢靠将技巧都是没用的,今天我们先讲讲要怎么巩固基础,给到朋友们分享一些…

kaggle平台学习复习笔记 | 特征工程

目录数值字段roundBox/Bins类别字段onehotLabelEncoderOrdinal EncodingBinaryEncoderFrequency/Count EncodingMean/Target Encoding日期字段特征筛选feature_importances_利用方差利用相关性利用线性模型迭代消除排列重要性(Permutation Importance)特征工程决定了模型精度的…

MATLAB-RBF神经网络例1

采用所描述的系统中﹐假设真实质量为m2,在仿真中,初始值为,采用的自适应律为:设定参数为y0.5,10,25,6,分别设定参考位置为r(t)0,r(t )sin(4t) ,初始条件为,。图1.1和图1.2为指令r(t)0时控制效果,图1.3和图1.4为指令r(t)sin(4t )时的控制效果。…

verilog学习笔记- 12)触摸按键控制LED灯实验

目录 简介: 实验任务: 硬件设计: 程序设计: 下载验证: 简介: 触摸按键主要可分为四大类:电阻式、电容式、红外感应式以及表面声波式。根据其属性的不同,每种触摸按键都有其合适的使用领域。 电阻式触摸按键&#…

响应式与观察者模式

什么是响应式?响应式 是Vue 最独特的特性之一,是非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。我们也叫他双向绑定。如果想要更改视图,只要直接更改对应属性的值即可&#xff…

从隔壁老王开始的信号处理入门

诸神缄默不语-个人CSDN博文目录 我是从GNN被扔到NLP然后又做起了GNN现在又被喊去搞时间序列分类,所以现在才开始看信号处理(因为我开始做GNN以来,GNN就以图域而非谱域为主了,所以那时我没怎么看过信号处理)。 所以写个…

RabbitMQ消息队列(三):任务分发机制

在上篇文章中,我们解决了从发送端(Producer)向接收端(Consumer)发送“Hello World”的问题。在实际的应用场景中,这是远远不够的。从本篇文章开始,我们将结合更加实际的应用场景来讲解更多的高级…

jetson nano上编译与使用西门子PLC通讯库snap7

文章目录一.西门子snap7介绍二.西门子S7通讯介绍三.jetson nano编译snap7库四.Qt Cmake导入snap7库五.snap7主要函数说明1.与PLC建立连接2.读写PA区变量3.读写MK区变量六.通讯程序示例一.西门子snap7介绍 Snap7 是一个基于以太网与S7系列的西门子PLC通讯的开源库。支持包括S7系…

2023美赛数学建模ABCDEF题思路模型代码

占个位置吧,开始在本帖实时更新赛题思路代码,文章末尾获取! 持续为更新参考思路 赛题思路 会持续进行思路模型分析,下自行获取。 A题思路: (比赛开始后第一时间更新) B题思路:…

《算法分析与设计》复习笔记

目录 一、算法的基本概念 1.1 算法的定义 1.2 算法的“好坏”如何衡量? 1.3 描述算法的时间复杂度 ⭐ 1.4 如何评价算法 二、 分治法 2.1 分治法的求解步骤 2.2 平衡的概念 2.3 递归式解法 2.3.1 主定理法 ⭐ 2.4 分治法的使用条件 2.5 分治法实例 2.5…

助力安全作业生产,基于轻量级YOLOv6s开发实践反光衣检测识别分析系统

在很多实际作业生产场景中,出于对安全的考虑,施工作业等操作都是要求穿戴反光衣的,这个主要是为了保护人身安全,但是很多时候工程作业场景下因为实际种种的原因工人实际作业操作的时候很多人并没有按照要求穿戴反光衣这就给安全生…

OPTEE安全存储

本文主要介绍OPTEE的安全存储技术,翻译自官方文档:Secure storage — OP-TEE documentation documentation (optee.readthedocs.io) 一、背景 OP-TEE中的安全存储是根据GlobalPlatform的TEE Internal Core API(这里称为可信存储)…

2023/1/13总结

今天学习了链式向前星和唯一分解定理(数论)。 链式向前星 链式向前星是一种存储图的方法,在此之前我们学到过存储图的方式:邻接表以及邻接矩阵,邻接矩阵浪费了很大的空间,而邻接表 写起来的代码有一点点…