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

CSS3属性之text-overflow:ellipsis

news 2026/5/20 18:19:42

语法：

text-overflow:clip |  ellipsis

默认值为clip 不显示省略标记

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

ellipsis:当对象内文本一处时显示省略标记(...)。

一、常见的单行文本溢出显示省略写法：

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><style type="text/css">.p{width: 100px;height: 40px;line-height: 40px;text-overflow: ellipsis;    /*1*/overflow: hidden;           /*2*/white-space: nowrap;        /*3*/word-break: break-all;}</style><body><p class="p">多行文本溢出显示多行文本溢出显示多行文本溢出显示</p></body>
</html>

二、多行文本溢出 

WebKit浏览器有一个-webkit-line-clamp的属性，用这个即可以实现webkit内核的浏览器、以及大部分移动端的多行文本溢出省略号；

display:-webkit-box;

-webkit-line-clamp: 3/*第几行裁剪*/

-webkit-box-orient:vertical;

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><style type="text/css">.p {height: 60px;line-height: 30px;width: 80px;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;     /*1*/-webkit-line-clamp: 2;    /*2*//*第几行裁剪*/-webkit-box-orient: vertical;   /*3*/} </style><body><p class="p">多行文本溢出显示多行文本溢出显示多行文本溢出显示多行文本溢出显示多示</p></body>
</html>

其它浏览器的话就需要通过js实现：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><style type="text/css">div{height: 60px;}p {line-height: 30px;width: 80px;margin: 0 auto;}</style><body><div id="div"><p id="p">多行文本溢出显示多行文本溢出显示多行文本溢行文本溢示</p></div></body><script type="text/javascript">var eleH = document.getElementById("div").clientHeight;var pEle = document.getElementById("p");while(pEle.clientHeight > eleH) {pEle.innerText = pEle.innerText.replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...");};</script>
</html>

 

相关文章：

CSS3属性之text-overflow:ellipsis

语法&#xff1a; text-overflow:clip | ellipsis 默认值为clip 不显示省略标记 clip:当前对象内文本溢出时不显示省略标记,而是将溢出部分裁剪。 ellipsis:当对象内文本一处时显示省略标记(...)。 一、常见的单行文本溢出显示省略写法&#xff1a; text-overflow: ellipsis; …...

编程日记 2023/8/6 5:28:16

【深度学习_TensorFlow】梯度下降

写在前面 一直不太理解梯度下降算法是什么意思&#xff0c;今天我们就解开它神秘的面纱 写在中间 线性回归方程 如果要求出一条直线&#xff0c;我们只需知道直线上的两个不重合的点&#xff0c;就可以通过解方程组来求出直线 但是&#xff0c;如果我们选取的这两个点不在直…...

编程日记 2023/8/6 5:27:15

C++使用 auto 自动推断类型

C使用 auto 自动推断类型 在有些情况下&#xff0c; 根据赋给变量的初值&#xff0c; 很容易知道其类型。 例如&#xff0c; 如果将变量的初值设置成了 true&#xff0c;就可推断其类型为 bool。如果您使用的编译器支持 C11 和更高版本&#xff0c;可不显式地指定变量的类型&a…...

编程日记 2023/8/6 5:26:14

【前端面试手撕题】call、bind、new、freeze、浅拷贝

FED11 _call函数 描述 请补全JavaScript代码&#xff0c;要求实现Function.call函数的功能且该新函数命名为"_call"。 <!DOCTYPE html> <html><head><meta charset"UTF-8"><style>/* 填写样式 */</style> </head…...

编程日记 2023/8/6 5:25:13

MacBook Pro 16 M1 Max 升级 macOS Ventura 13.5 兼容测评

今天给大家带来了 MacBook Pro 16 M1 Max 升级 macOS Ventura 13.5 兼容 100 挑战赛 的视频&#xff0c;现在充电头再以文章的形式呈现给大家&#xff0c;让大家更清楚、直白的了解这款笔记本在升级系统后的兼容性如何。 MacBook Pro 16 M1 Max 配置了 140W 的 MagSafe 充电口&…...

编程日记 2023/8/6 5:24:12

实现5*5正方形网格x轴和y轴显示对应数值组件封装

实现5*5正方形网格x轴和y轴显示对应数值组件封装 需求&#xff1a;按5*5的正方形网格&#xff0c;根据目标数据的x和y轴值显示对应的文字&#xff0c;实现效果图如下&#xff1a;&#xff08;当前目标数值&#xff1a;x2&#xff0c;y2&#xff09; 代码如下&#xff1a; <…...

编程日记 2023/8/6 5:23:11

基于Matlab实现图像压缩技术（附上完整源码+图像+程序运行说明）

介绍 图像压缩是一种将图像数据压缩以减小文件大小的技术。在数字图像处理中&#xff0c;图像通常以像素阵列的形式表示。对于大型图像文件&#xff0c;传输和存储成本可能很高&#xff0c;因此图像压缩技术变得至关重要。在本文中&#xff0c;我们将介绍一种使用Matlab实现图…...

编程日记 2023/8/6 5:22:10

棒球联盟对于市场发展规划·棒球1号位

棒球联盟对于市场发展规划 1. 棒球联盟市场发展背景分析 在深入探讨棒球联盟市场发展背景之前&#xff0c;我们首先要明确&#xff0c;棒球&#xff0c;作为一种全球流行的体育项目&#xff0c;其在市场上的发展具有相当悠久的历史。棒球文化的起源可以追溯到上个世纪初&#…...

编程日记 2023/8/6 5:21:09

ansible控制主机和受控主机之间免密及提权案例

目录 案例描述 环境准备 案例一--免密远程控制主机 效果展示&#xff1a; 解决方案 1.添加主机 2.通过ssh-key生成密钥对 3.生成ssh-copy-id 4.验证 案例二-----免密普通用户提权 效果展示 解决方案 1.使用普通用户&#xff0c;与案例一 一样&#xff0c;进行发送密钥…...

编程日记 2023/8/6 5:20:08

flink1.17 eventWindow不要配置processTrigger

理论上可以eventtime processtime混用,但是下面代码测试发现bug,输入一条数据会一直输出. flink github无法提bug/问题. apache jira账户新建后竟然flink又需要一个账户,放弃 bug复现操作 idea运行代码后 往source kafka发送一条数据 a,1,1690304400000 可以看到无限输出…...

编程日记 2023/8/6 5:19:04

Python导出SqlServerl数据字典为excel

sql代码 SELECTtableName D.name ,tableIntroduce isnull(F.value, ),sort A.colorder,fieldName A.name,catogary B.name,bytes A.Length,lengths COLUMNPROPERTY(A.id, A.name, PRECISION),scales isnull(COLUMNPROPERTY(A.id, A.name, Scale), 0),isOrNotNull Cas…...

编程日记 2023/8/6 5:17:56

PB:DDE服务器函数

1、GetCommandDDE() 功 能：得到DDE客户应用发送的命令。 语 法：GetCommandDDE ( string ) 参 数：string：string类型的变量，用于保存DDE客户应用发送的命令。 返回值：Integer。函数执行成功时返回1，发生错误时返回-1。如果string参数的值为NULL， GetCommandDDE()…...

编程日记 2023/8/6 5:16:55

awk经典实战、正则表达式

目录 1.筛选给定时间范围内的日志 2.统计独立IP 案列 需求 代码 运行结果 3.根据某字段去重 案例 运行结果 4.正则表达式 1&#xff09;认识正则 2&#xff09;匹配字符 3&#xff09;匹配次数 4&#xff09;位置锚定&#xff1a;定位出现的位置 5&#xff09;分组…...

编程日记 2023/8/6 5:15:53

Python脚本-时间盲注

BlindBool_get import requests from optparse import OptionParser import threading#存放变量 DBName "" DBTables [] DBColumns [] DBData {} flag You are in #设置重连次数以及将连接改为短连接 #防止因为HTTP连接数过多导致的MAX retries exceeded with …...

编程日记 2023/8/6 5:14:51

面试总结-Redis篇章(十)——Redis哨兵模式、集群脑裂

Redis哨兵模式、集群脑裂 哨兵模式哨兵的作用服务状态监控 Redis集群&#xff08;哨兵模式&#xff09;脑裂解决办法 哨兵模式 为了保证Redis的高可用&#xff0c;Redis提供了哨兵模式 哨兵的作用 服务状态监控 Redis集群&#xff08;哨兵模式&#xff09;脑裂 假设由于网络原…...

编程日记 2023/8/6 5:13:50

el-table那些事

el-table那些事 获取el-table所有勾选的行数据 用于记录工作和日常学习遇到的坑&#xff0c;需求。 vue3element-plusts 获取el-table所有勾选的行数据 1、需要先声明一个ref变量&#xff0c;并赋值给el-table 2、通过el-table提供的getSelectionRows()函数获取选中的"行…...

编程日记 2023/8/6 5:12:48

kubernetes（一）

文章目录 1. k8s架构2. k8s集群搭建 1. k8s架构 2. k8s集群搭建...

编程日记 2023/8/6 5:11:47

计算机网络（6） --- https协议

计算机网络&#xff08;5&#xff09; --- http协议_哈里沃克的博客-CSDN博客http协议https://blog.csdn.net/m0_63488627/article/details/132089130?spm1001.2014.3001.5501 目录 1.HTTPS的出现 1.HTTPS协议介绍 2.补充概念 1.加密 1.解释 2.原因 3.加密方式 对称加…...

编程日记 2023/8/6 5:10:46

（三）Node.js - 模块化

1. Node.js中的模块化 Node.js中根据模块来源不同&#xff0c;将模块分为了3大类&#xff0c;分别是&#xff1a; 内置模块&#xff1a;内置模块由Node.js官方提供的&#xff0c;例如fs、path、http等自定义模块&#xff1a;用户创建的每个.js文件&#xff0c;都是自定义模块…...

编程日记 2023/8/6 5:09:45

502 bad gateway报错

代码在本地运行可以正常访问后端接口&#xff0c;部署服务器报错502。直接检查防火墙状态是否开启&#xff0c;先关闭防火墙试一下。如果是防火墙的原因在打开防火墙&#xff0c;开放需要的端口即可。 1、先查看防火墙状态&#xff1a; systemctl status firewalld2、停止防火…...

编程日记 2023/8/6 5:08:44

C语言assert断言：从核心原理到工程实践的全方位指南

1. 项目概述&#xff1a;为什么assert是C程序员的“随身听诊器” 在C语言的世界里摸爬滚打久了&#xff0c;你肯定遇到过这种场景&#xff1a;程序在开发环境里跑得好好的&#xff0c;一到测试环境就莫名其妙崩溃&#xff1b;或者某个函数昨天还能用&#xff0c;今天加了几行代…...

编程新知 2026/5/20 18:18:42

告警爆炸，根因定位困难？用DevOps Agent帮你自动查！

随着企业在亚马逊云科技上的工作负载日益复杂——Amazon EC2集群、Amazon RDS数据库、Amazon ECS/EKS容器、Amazon Lambda函数、网络与负载均衡等多种服务交织运行——运维团队面临严峻挑战&#xff1a;告警爆炸&#xff1a;Amazon CloudWatch、第三方监控&#xff08;Datadog、…...

编程新知 2026/5/20 17:40:10

终极指南：如何在Windows 11上轻松安装Android应用？APK Installer完整教程

终极指南&#xff1a;如何在Windows 11上轻松安装Android应用&#xff1f;APK Installer完整教程 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否曾经想在Window…...

编程新知 2026/5/20 16:43:33

ARM DesignStart免费开放Cortex-M0/M3内核，开启零门槛定制SoC时代

1. 项目概述&#xff1a;ARM DesignStart升级&#xff0c;工程师的“零门槛”造芯时代作为一名在嵌入式领域摸爬滚打了十几年的老工程师&#xff0c;我亲眼见证了芯片设计从大型公司的“专利”到如今工程师个人也能触及的转变。最近&#xff0c;ARM公司对其DesignStart项目的一…...

编程新知 2026/5/20 16:32:59

对比按需计费与套餐taotoken token plan在长期项目中的成本优势分析

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 对比按需计费与套餐&#xff1a;Taotoken Token Plan 在长期项目中的成本优势分析 1. 项目背景与成本考量 在长期依赖大模型 API …...

编程新知 2026/5/20 16:11:35

别再死记硬背了！用‘IP地址与运算’这个技巧，5分钟搞懂子网掩码和网络地址

子网掩码实战&#xff1a;5分钟掌握IP与运算的核心技巧 网络工程师面试时总会被问到"如何快速计算网络地址"&#xff0c;而很多初学者面对子网掩码和IP地址的二进制转换就头疼不已。其实有个被大多数教材忽略的技巧——IP地址主机位置零法&#xff0c;能让你不用完整…...

编程新知 2026/5/20 15:41:02

如何快速掌握3DS硬件检测：面向初学者的完整3DSident使用指南

如何快速掌握3DS硬件检测&#xff1a;面向初学者的完整3DSident使用指南 【免费下载链接】3DSident PSPident clone for 3DS 项目地址: https://gitcode.com/gh_mirrors/3d/3DSident 你是否曾好奇自己的Nintendo 3DS内部藏着什么秘密&#xff1f;想知道它的制造日期、电…...

编程新知 2026/5/20 15:05:17

第七章：LLM输出质量评估方法——从指标到流程

本章难度：★★★★☆ | 预计阅读时间：10分钟 你将学到：LLM评估的四大核心维度、三大评估框架对比、LLM-as-Judge的用法与局限、人工评估设计方法、红队测试流程、以及如何建立完整的评估体系 引言：为什么评估是AI产品的核心竞争力 你上线了一个RAG聊天机器人，工程师说&qu…...

编程新知 2026/5/20 15:01:14

长波双色InAs/GaSb超晶格红外探测器芯片：从材料设计到焦平面集成

1. 项目概述&#xff1a;从“双色”到“芯片”的技术跨越在红外探测领域&#xff0c;追求“看得更清、看得更远、看得更准”是永恒的主题。我们这次要聊的“长/长波双色InAs/GaSb超晶格焦平面探测器芯片”&#xff0c;听起来名字很长很专业&#xff0c;但它本质上解决的是一个非…...

编程新知 2026/5/20 13:41:44

查询不准？响应延迟？Perplexity阅读推荐失效全归因，一线SRE团队72小时压测实录

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;查询不准&#xff1f;响应延迟&#xff1f;Perplexity阅读推荐失效全归因&#xff0c;一线SRE团队72小时压测实录 问题爆发现场还原 凌晨2:17&#xff0c;Perplexity阅读推荐API的P99延迟突增至8.4s&a…...

编程新知 2026/5/20 13:32:42