当前位置: 首页 > news >正文

如何使用CSS让页面文本两行显示,超出省略号表示

talk is cheap, show me the code

举个栗子,如下:

<span class="a">我说说<b class="b">打瞌睡党风建设打火机</b>说说色儿</span>
a{display:block/inline-block;width:100px;overflow: hidden;
white-space: nowrap;text-overflow: ellipsis;
}
b{display:inline; //正确display:inline-block //错误,b标签里的字超出不能显示省略号(...)
}
 //一行white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;//两行
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。

实现方法:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

效果如图:
在这里插入图片描述
但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。

接下来重点说一说多行文本溢出显示省略号,如下。

实现方法:

display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;
overflow: hidden;

效果如图:
在这里插入图片描述
适用范围:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

注:

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
实现方法:

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);}

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

适用范围:
该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

1.将height设置为line-height的整数倍,防止超出的文字露出。
2.给p::after添加渐变背景可避免文字只显示一半。
3.由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。


The end.

相关文章:

如何使用CSS让页面文本两行显示,超出省略号表示

talk is cheap, show me the code 举个栗子&#xff0c;如下&#xff1a; <span class"a">我说说<b class"b">打瞌睡党风建设打火机</b>说说色儿</span>a{display:block/inline-block;width:100px;overflow: hidden; white-spac…...

likeshop同城跑腿系统likeshop回收租赁系统likeshop多商户商城安装及小程序对接方法

前言&#xff1a;首先likeshop是一个开发平台&#xff0c;是一个独创的平台就像TP内核平台一样&#xff0c;你可以在这个平台上开发和衍生出很多伟大的产品&#xff0c;以likeshop为例&#xff0c;他们开发出商城系统&#xff0c;团购系统&#xff0c;外卖点餐系统&#xff0c;…...

C# 与 Windows API 交互的“秘密武器”:结构体和联合体

一、引言 在 C# 的编程世界里&#xff0c;当我们想要深入挖掘 Windows 系统的底层功能&#xff0c;与 Windows API 打交道时&#xff0c;结构体和联合体就像是两把神奇的钥匙&#x1f511; 它们能够帮助我们精准地操控数据&#xff0c;实现一些高级且强大的功能。就好比搭建一…...

PHP 使用 Redis

PHP 使用 Redis PHP 是一种广泛使用的服务器端编程语言,而 Redis 是一个高性能的键值对存储系统。将 PHP 与 Redis 结合使用,可以为 Web 应用程序提供快速的读写性能和丰富的数据结构。本文将详细介绍如何在 PHP 中使用 Redis,包括安装、连接、基本操作以及一些高级应用。 …...

嵌入式系统Linux实时化(四)Xenomai应用开发测试

1、Xenomai 原生API 任务管理 Xenomai 本身提供的一系列多任务调度机制,主要有以下一些函数: int rt_task_create (RT_TASK task, const char name, int stksize, int prio, intmode) ; 任务的创建;int rt_task_start(RT_TASK task, void(entry)(void cookie), void cookie…...

26个开源Agent开发框架调研总结(2)

根据Markets & Markets的预测&#xff0c;到2030年&#xff0c;AI Agent的市场规模将从2024年的50亿美元激增至470亿美元&#xff0c;年均复合增长率为44.8%。 Gartner预计到2028年&#xff0c;至少15%的日常工作决策将由AI Agent自主完成&#xff0c;AI Agent在企业应用中…...

Element UI与Element Plus:深度剖析

文章目录 前言一、概述二、技术特性三、设计理念四、使用体验五、迁移指南结语 前言 随着前端开发技术的快速发展&#xff0c;Vue.js 生态系统中的组件库也在不断进化。Element UI 和 Element Plus 是两个深受开发者喜爱的 Vue 组件库&#xff0c;它们分别构建于 Vue 2.x 和 V…...

二、BIO、NIO编程与直接内存、零拷贝

一、网络通信 1、什么是socket&#xff1f; Socket 是应用层与 TCP/IP 协议族通信的中间软件抽象层&#xff0c;它是一组接口&#xff0c;一般由操作 系统提供。客户端连接上一个服务端&#xff0c;就会在客户端中产生一个 socket 接口实例&#xff0c;服务端每接受 一个客户端…...

VSCode 更好用的设置

配置 {"terminal.integrated.fontSize": 15,"security.workspace.trust.untrustedFiles": "open","editor.minimap.enabled": false,"workbench.colorTheme": "Visual Studio 2017 Light - C","gnuGlobal.c…...

【git】-3 github创建远程仓库,上传自己的项目,下载别人的项目

一、如何使用Github 1、创建远程仓库 2、使用github拉取/推送代码 克隆仓库 向远程仓库推送代码-git push 二、上传我们自己的项目到github 方法一&#xff1a;直接上传 方法二&#xff1a;使用git命令 方法三&#xff1a; 将仓库拉取到本地上传 三、下载别人的项目 …...

计算机组成原理(1)

系统概述 计算机硬件基本组成早期冯诺依曼机现代计算机 计算机各部分工作原理主存储器运算器控制器计算机工作过程 此文章的图片资源获取来自于王道考研 计算机硬件基本组成 早期冯诺依曼机 存储程序是指将指令以二进制的形式事先输入到计算机的主存储器&#xff0c;然后按照…...

Openstack网络组件之Neutron

从Nova到Neutron&#xff1a;OpenStack网络架构的演变 在云计算和虚拟化技术迅猛发展的背景下&#xff0c;OpenStack 成为了构建私有云和公有云平台的首选解决方案之一。早期版本中&#xff0c;Nova 项目不仅负责计算资源的管理&#xff0c;还承担了提供基本网络连接的任务。然…...

神州数码交换机和路由器命令总结

神州数码交换机和路由器命令总结 一、神州数码交换机命令总结 1. 交换机恢复出厂设置及其基本配置. 1) //进入特权模式 2) del startup.cfg 2. Telnet方式管理交换机. 1) //进入全局配置模式 2) enable password 0 [密码] 3) Line 0 4 4) Password 0 [密码] 5) Login 3. 交换机…...

Spring MVC简单数据绑定

【图书介绍】《SpringSpring MVCMyBatis从零开始学&#xff08;视频教学版&#xff09;&#xff08;第3版&#xff09;》_springspringmvcmybatis从零开始 代码、课件、教学视频与相关软件包下载-CSDN博客 《SpringSpring MVCMyBatis从零开始学(视频教学版)&#xff08;第3版&…...

《SQL ORDER BY》

《SQL ORDER BY》 介绍 SQL(Structured Query Language)是一种用于管理关系数据库管理系统的标准编程语言。ORDER BY语句是SQL中的一个重要部分,它用于对查询结果进行排序。在本篇文章中,我们将详细介绍SQL ORDER BY语句的用法、语法、示例以及一些高级应用。 语法 ORD…...

RabbitMQ基础(简单易懂)

RabbitMQ高级篇请看&#xff1a; RabbitMQ高级篇-CSDN博客 目录 什么是RabbitMQ&#xff1f; MQ 的核心概念 1. RabbitMQ 的核心组件 2. Exchange 的类型 3. 数据流向说明 如何安装RabbitQueue&#xff1f; WorkQueue&#xff08;工作队列&#xff09;&#xff1a; Fa…...

DNS解析域名简记

域名通常是由: 权威域名.顶级域名.根域名组成的。 从左往右&#xff0c;级别依次升高&#xff0c;这和外国人从小范围到大范围的说话习惯相关。&#xff08;我们自己是更习惯先说大范围再说小范围&#xff0c;如XX省XX市XX区XX路&#xff09; DNS解析域名时&#xff0c;会先查…...

【2024年华为OD机试】(B卷,100分)- 求最小步数 (Java JS PythonC/C++)

一、问题描述 题目描述 求从坐标零点到坐标点 n 的最小步数&#xff0c;一次只能沿横坐标轴向左或向右移动 2 或 3。 注意&#xff1a;途径的坐标点可以为负数。 输入描述 坐标点 n 输出描述 输出从坐标零点移动到坐标点 n 的最小步数。 备注 1 < n < 10^9 用例…...

<C++> XlsxWriter写EXCEL

XlsxWriter XlsxWriter是一个用于创建和写入Excel 2007及以上版本&#xff08;.xlsx文件格式&#xff09;的C库。以下是对XlsxWriter的详细介绍&#xff1a; 主要功能 文本、数字和公式写入&#xff1a;可以向多个工作表中写入文本、数字和公式。格式设置&#xff1a;支持丰…...

接上一主题,实现QtByteArray任意进制字符串转为十进制数

函数&#xff1a; /// <summary>/// n进制字符串转为十进制数&#xff0c;snDefine的长度最小为二进制数。/// 例子&#xff1a;/// _pn(_Math::strNToInt(_t("1010"), _t("01")));/// _pn(_Math::strNToInt(_t("-1010"), _t("0123…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

WEB3全栈开发——面试专业技能点P7前端与链上集成

一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的 服务端渲染&#xff08;SSR&#xff09;与静态网站生成&#xff08;SSG&#xff09; 框架&#xff0c;由 Vercel 开发。它简化了构建生产级 React 应用的过程&#xff0c;并内置了很多特性&#xff1a; ✅ 文件系…...

深度解析:etcd 在 Milvus 向量数据库中的关键作用

目录 &#x1f680; 深度解析&#xff1a;etcd 在 Milvus 向量数据库中的关键作用 &#x1f4a1; 什么是 etcd&#xff1f; &#x1f9e0; Milvus 架构简介 &#x1f4e6; etcd 在 Milvus 中的核心作用 &#x1f527; 实际工作流程示意 ⚠️ 如果 etcd 出现问题会怎样&am…...

ubuntu中安装conda的后遗症

缘由: 在编译rk3588的sdk时&#xff0c;遇到编译buildroot失败&#xff0c;提示如下&#xff1a; 提示缺失expect&#xff0c;但是实测相关工具是在的&#xff0c;如下显示&#xff1a; 然后查找借助各个ai工具&#xff0c;重新安装相关的工具&#xff0c;依然无解。 解决&am…...

使用ch340继电器完成随机断电测试

前言 如图所示是市面上常见的OTA压测继电器&#xff0c;通过ch340串口模块完成对继电器的分路控制&#xff0c;这里我编写了一个脚本方便对4路继电器的控制&#xff0c;可以设置开启时间&#xff0c;关闭时间&#xff0c;复位等功能 软件界面 在设备管理器查看串口号后&…...

十二、【ESP32全栈开发指南: IDF开发环境下cJSON使用】

一、JSON简介 JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;具有以下核心特性&#xff1a; 完全独立于编程语言的文本格式易于人阅读和编写易于机器解析和生成基于ECMAScript标准子集 1.1 JSON语法规则 {"name"…...