CSS中如何设置单行或多行内容超出后,显示省略号

1. 设置超出显示省略号

css设置超出显示省略号可分两种情况:

  1. 单行文本溢出显示省略号…
  2. 多行文本溢出显示省略号…

但使用的核心代码是一样的:需要先使用 overflow:hidden;来把超出的部分隐藏,然后使用text-overflow:ellipsis;当文本超出时显示为省略号。

  • overflow:hidden; 不显示超过对象尺寸的内容,就是把超出的部分隐藏了;
  • text-overflow:ellipsis; 当文本对象溢出是显示…,当然也可是设置属性为 clip 不显示点点点;

1.1单行文本溢出显示省略号

<div class="wrap">
  <div class="content">测试数据:css单行文本超出长度显示省略号--明天也要努力</div>
  <div class="content text-ellipsis">测试数据:css单行文本超出长度显示省略号--明天也要努力</div>
</div>

<style>
.wrap{
  width: 200px;
  height: 200px;
}
.content{
  width: 100%;
  margin-top: 6px;
}
.text-ellipsis{
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}
</style>

在这里插入图片描述

1.2多行文本溢出显示省略号

思路:

  1. 使用 overflow:hidden; 语句不显示超过对象尺寸的内容,就是把超出的部分隐藏了;
  2. 使用 -webkit-line-clamp: 行数; 语句限制显示文本的行数;
  3. 使用 text-overflow:ellipsis; 语句用省略号“…”隐藏超出范围的文本
<div class="wrap">
  <div class="content">
    测试数据:css多行文本超出长度显示省略号,多行文本超出长度显示省略号--明天也要努力
  </div>
  <hr>
  <div class="content text-ellipsis">
    测试数据:css多行文本超出长度显示省略号,多行文本超出长度显示省略号--明天也要努力
  </div>
</div>

<style>
.wrap{
  width: 200px;
  height: 300px;
}
.content{
  width: 100%;
}
.text-ellipsis{
  overflow:hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
</style>

说明: 移动端浏览器绝大部分是WebKit内核的,所以该方法适用于移动端;

  • -webkit-line-clamp:用来限制在一个块元素显示的文本的行数,这是一个不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中
  • display: -webkit-box将对象作为弹性伸缩盒子模型显示
  • -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式

关于 -webkit-line-clamp 属性拓展

  1. -webkit-line-clamp 可以把块容器中的内容限制为指定的行数,它只有在 display 属性设置成 -webkit-box-webkit-inline-box 并且-webkit-box-orient 属性设置成 vertical 时才有效果。
  2. 在大部分情况下,也需要设置 overflow 属性为 hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号 (ellipsis )。
  3. 当他应用于锚 (anchor) 元素时,截取动作可以发生在文本中间,而不必在末尾。
  4. 备注: 此属性在 WebKit 中已经实现,但有一些问题。他是旧标准的一种支持。CSS Overflow Module Level 3 规范还定义了一个 line-clamp 属性,用来代替此属性且避免一些问题。

语法:

/* Keyword value */
-webkit-line-clamp: none;

/* <integer> values */
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/* Global values */
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: unset;

none:这个值表明内容显示不会被限制。
integer:这个值表明内容显示了多少行之后会被限制。必须大于 0.

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

在react中使用tailwindcss

安装tailwind css npm i -D tailwindcssnpm:tailwindcss/postcss7-compat postcss^7 autoprefixer^9安装 CRACO 由于 Create React App 不能让您覆盖原生的 PostCSS 配置&#xff0c;所以我们还需要安装 CRACO 才能配置 Tailwind。 npm install craco/craco配置CRACO 在项目根…

贪心算法(算法竞赛、蓝桥杯)--糖果传递

1、B站视频链接&#xff1a;A31 贪心算法 P2512 [HAOI2008] 糖果传递_哔哩哔哩_bilibili 题目链接&#xff1a;[HAOI2008] 糖果传递 - 洛谷 #include <bits/stdc.h> using namespace std; const int N1000005; int n,a[N],c[N]; long long b,ans;int main(){scanf(&quo…

游戏引擎中的动画基础

一、动画技术简介 视觉残留理论 - 影像在我们的视网膜上残留1/24s。 游戏中动画面临的挑战&#xff1a; 交互&#xff1a;游戏中的玩家动画需要和场景中的物体进行交互。实时&#xff1a;最慢需要在1/30秒内算完所有的场景渲染和动画数据。&#xff08;可以用动画压缩解决&am…

【C语言初阶(五)】数组

❣博主主页: 33的博客❣ ▶文章专栏分类: C语言从入门到精通◀ &#x1f69a;我的代码仓库: 33的代码仓库&#x1f69a; 目录 1. 前言2.一维数组的概念3.一维数组的创建和初始化3.1数组的创建3.2数组的初始化3.3数组的类型 4.一维数组的使用4.1数组下标4.2数组元素打印4.4数组元…

算法——前缀和之除自身以外数组的乘积、和为K的子数组、和可被K整除的子数组、连续数组、矩阵区域和

这几道题对于我们前面讲过的一维、二维前缀和进行了运用,包含了面对特殊情况的反操作 目录 4.除自身以外数组的乘积 4.1解析 4.2题解 5.和为K的子数组 5.1解析 5.2题解 6.和可被K整除的子数组 6.1解析 6.2题解 7.连续数组 7.1题解 7.2题解 8.矩阵区域和 8.1解析 …

Ubuntu 20.04 系统如何优雅地安装NCL?

一、什么是NCL&#xff1f; NCAR Command Language&#xff08;NCL&#xff09;是由美国大气研究中心&#xff08;NCAR&#xff09;推出的一款用于科学数据计算和可视化的免费软件。 它有着非常强大的文件输入和输出功能&#xff0c;可读写netCDF-3、netCDF-4 classic、HDF4、b…

使用PWM实现呼吸灯功能

CC表示的意思位捕获比较&#xff0c;CCR表示的是捕获比较寄存器 占空比等效于PWM模拟出来的电压的多少&#xff0c;占空比越大等效出的模拟电压越趋近于高电平&#xff0c;占空比越小等效出来的模拟电压越趋近于低电平&#xff0c;分辨率表示的是占空比变化的精细程度&#xf…

MATLAB:拟合与插值

一、关于多项式的基本操作 若要求非线性方程的根&#xff0c;则采用fzero, fminbnd函数 二、多项式拟合 clc, clear x0:0.2:10; y0.25*x20*sin(x); plot(x,y,k.,MarkerSize,15) grid on; hold on [p1,s1,mu1]polyfit(x,y,3); %3阶多项式拟合 y1polyval(p1,x,s1,mu1); [p2,s…

mmz批量多页抓取数据-AES.CBC算法-爬虫

目标&#xff1a;mmz多页下载 方法&#xff1a;加一个for循环实现多页的下载 问题&#xff1a;浏览器传输服务器时对页码参数做了加密处理 解决方法&#xff1a; 1、判断加密算法模式&#xff08;mmz是AES-CBC算法&#xff09; 2、找到加密的key和iv 代码&#xff1a; i…

微信小程序开发学习笔记——3.11完成form评论案例的实现逻辑

>>跟着b站up主“咸虾米_”学习微信小程序开发中&#xff0c;把学习记录存到这方便后续查找。 课程连接&#xff1a;https://www.bilibili.com/video/BV19G4y1K74d?p25&vd_source9b149469177ab5fdc47515e14cf3cf74 一、javascript参考手册——splice https://www.…

9.用FFmpeg测试H.264文件的解码时间

1. Essence of Method 要测试对H.264文件的解码时间&#xff0c;可以使用FFmpeg进行操作。FFmpeg是一个开源的多媒体处理工具&#xff0c;可以用来处理视频和音频文件&#xff0c;包括解码H.264文件。以下是使用FFmpeg的命令行来测试解码时间的方法&#xff1a; ffmpeg -i in…

01_什么是深度学习

人工智能包含了机器学习&#xff0c;而深度学习是机器学习的一个分支。 人工智能 试图将通常由人类完成的智力任务自动化—这就是人工智能。 用硬编码的方式实现人工智能&#xff0c;这称作符号主义人工智能Symbolic AI。其中包含专家系统。 机器学习 机器学习是一种替代符…

一个接口白嫖四个AI平台, 五个翻译平台

牙叔教程 简单易懂 家人们, 我这标题起的咋样, 请在评论区打出你对标题的评价 今天我们介绍的仓库是 OneYiGitHub - snailuncle/oneyi: 一个翻译接口, 对接多个平台, one译. 完全免费开源, 没有任何限制, 这是一个翻译接口, 他支持以下平台 五个翻译平台 小牛翻译 小牛翻译开…

sparksession对象简介

什么是sparksession对象 spark2.0之后&#xff0c;sparksession对象是spark编码的统一入口对象&#xff0c;通常我们在rdd编程时&#xff0c;需要SparkContext对象作为RDD编程入口&#xff0c;但sparksession对象既可以作为RDD编程对象入口&#xff0c;在sparkcore编程中可以通…

ARP和DDOS攻击防御介绍

学习目标&#xff1a; 1. 如何利用ARP漏洞进行攻击&#xff1f; 2. 怎样有效地防御ARP攻击&#xff1f; 3. 如何应对DDOS攻击&#xff1f; ARP攻击如何产生&#xff1f; ARP如何进行有效防御&#xff1f; ARP基础工作原理&#xff1a; 交换机会根据mac地址表&#xff0c;进行转…

书客护眼落地灯销量火爆,售罄、补货、又断货、再补货!又成断货王!

今日&#xff0c;备受关注的书客Sun护眼大路灯在市场上掀起了一股抢购热潮&#xff0c;作为近年来照明领域中最大的黑马品牌&#xff0c;始终坚持并最求技术创新的书客品牌&#xff0c;在近日发布全新系列落地护眼台灯后&#xff0c;不仅备受消费者青睐&#xff0c;更是成为了新…

C#,T检验(T -Test)的算法与源代码

1 T-Test 学生t检验(英语:Students t-test)是指虚无假设成立时的任一检定统计有学生t-分布的统计假说检定,属于母数统计。学生t检验常作为检验一群来自正态分配母体的独立样本之期望值的是否为某一实数,或是二群来自正态分配母体的独立样本之期望值的差是否为某一实数。举…

ABC345(A-C)

A - Leftrightarrow(100 points) 语法题&#xff0c;输入一个字符串&#xff0c;判断是否是&#xff1a;的样式&#xff0c;输入后只需判断是第一个和最后一个字符是否分别为">"和"<",再判断中间是否都是""即可。 #include<bits/stdc…

【C语言步行梯】C语言实现三子棋游戏(含详细分析)

&#x1f3af;每日努力一点点&#xff0c;技术进步看得见 &#x1f3e0;专栏介绍&#xff1a;【C语言步行梯】专栏用于介绍C语言相关内容&#xff0c;每篇文章将通过图片代码片段网络相关题目的方式编写&#xff0c;欢迎订阅~~ 文章目录 需求分析具体实现主函数体菜单实现游戏实…

sqllab第二十关通关笔记

知识点&#xff1a; cookie注入 可以进行url解析错误注入传参位置 get请求post请求cookie传参 输入admin admin进行登录&#xff0c;抓取当前数据包 通过放包发现是一个302跳转的响应包&#xff0c;页面只有一个 I Love Cookies&#xff1b;没什么信息 通过点击页面上方的按钮…