js实现一行半文本的截取
最近遇到一个需求是要在第二行的中间截取文本,因为在后面得贴一个图标,所以这种情况用常规的css截取文本有点难处理。于是在上网查阅后发现了几个方法:第一种是用伪元素加定位,把.;11..盖在文字的上面;第二种就是用js来实现了。
首先贴下常规的css截取文本的代码,这种在大多数情况都可以适用
1、单行文本的溢出隐藏
white-space: nowrap;// 设置文字在一行显示,不能换行
overflow: hidden;// 文字长度超出限定宽度时隐藏溢出的内容
text-overflow: ellipsis;// 当文字溢出时,显示...来代表溢出的文本
2、多行文本的溢出隐藏
-webkit-line-clamp: 2;// 用来限制在一个块元素显示的文本的行数,2 表示最多显示 2 行。
-webkit-box-orient: vertical;// 和 1 结合使用 ,设置或检索伸缩盒对象的子元素的排列方式
overflow: hidden;
text-overflow: ellipsis;
然后开始说下如何用js来实现
思路就是通过判断字符串的长度来找到截取的位置,然后用slice()方法获取从0到指定位置的字符,后面的字符都切掉,再补一个 ... 来实现。
noMoreWord = (text) => {let newText = textif(text.length > 39) newText = text.slice(0, 39)return newText
}
但是这样处理其实是有漏洞的,因为设计稿是全中文的时候在一行半溢出隐藏,但是实际情况肯定会有英文字母、数字、英文符号出现的,而这些字符占的位置和中文占的位置是不一样的。所以在这里需要根据先获取字符的总字节,然后通过字节的长度来决定需不需要隐藏。下面是优化后的代码
//判断字符串为中文字符串还是英文字符串,中文字符、符号占两个字符,英文字符、符号和数字占一个字符getStrLength = (str) => {let len = 0for(let i = 0; i < str.length; i++) {//中文字符if (str.charCodeAt(i) > 127) {len += 2 } else {len++}}return len}//字符串截取noMoreWord = (text, length, color='#000000') => {let newText = text;//字符长度大于参数length的,把后面多余的字符截取掉,替换为...。if (getStrLength(text) > length * 2) {newText = <span>{text.slice(0, length)}<span style={{color: color}}>...</span</span>;}return newText};
注意noMoreWord()中的length是你传入的长度,而getStrLength()中返回的是这串文本字节的长度,所以在判断时需要把length*2。
相关文章:
js实现一行半文本的截取
最近遇到一个需求是要在第二行的中间截取文本,因为在后面得贴一个图标,所以这种情况用常规的css截取文本有点难处理。于是在上网查阅后发现了几个方法:第一种是用伪元素加定位,把.;11..盖在文字的上面;第二…...
计算一个区间时间差值,时间保留剩下的差值
解决目的 begin end,去除集合类的其他区间差值List<rang> r1 new ArrayList(); 得到差值package com.jowoiot.wmzs.utils.date;import com.google.common.collect.Lists; import com.google.common.collect.Range; import org.apache.commons.lang.time.Dat…...
uniapp 微信小程序添加隐私保护指引
隐私弹窗: <uni-popup ref"popup"><view class"popupWrap"><view class"popupTxt">在你使用【最美万年历】之前,请仔细阅读<text class"blueColor" click"handleOpenPrivacyContract…...
行业追踪,2023-08-30
自动复盘 2023-08-30 凡所有相,皆是虚妄。若见诸相非相,即见如来。 k 线图是最好的老师,每天持续发布板块的rps排名,追踪板块,板块来开仓,板块去清仓,丢弃自以为是的想法,板块去留让…...
Redis——》Redis的部署方式对分布式锁的影响
推荐链接: 总结——》【Java】 总结——》【Mysql】 总结——》【Redis】 总结——》【Kafka】 总结——》【Spring】 总结——》【SpringBoot】 总结——》【MyBatis、MyBatis-Plus】 总结——》【Linux】 总结——》【MongoD…...
VTK——使用包围盒切割医学图像
VTK 库 vtkDICOMImageReader:专门用于读取医学图像格式 DICOM 的类。DICOM(Digital Imaging and Communications in Medicine)是医学图像和信息的标准。 vtkImageGaussianSmooth:用于图像的高斯平滑处理,主要用于去噪…...
在工具提示中使用自绘修改字体
在上一篇文章中,我们学习了如何在应用程序中添加工具提示。在之前的例子代码中,我们通过简单地为创建的工具提示设置了目标字体,这种方法很简单,因为自始至终,我们都只创建了一个工具提示。 但是,如果在应…...
【Git管理工具】使用Docker部署GitLab服务器
【Git管理工具】使用Docker部署GitLab服务器 一、GitLab介绍1.1 GitLab简介1.2 GitLab特点二、本次实践介绍2.1 本地环境规划2.2 本次实践介绍三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本3.3 检查docker compose 版本三、Docker CompseV2版本升级(可选)3.1 创建…...
安装kali虚拟机镜像的坑
1.0 安装虚拟机镜像成功之后,只有光标,没有界面 在VMware上安装kali linux环境时,根据提示操作完成后,开启虚拟机,屏幕黑屏,左上角有一个光标在闪,一直开不了机。 出现问题的原因,…...
【Android】TextView适配文本大小并保证中英文内容均在指定的UI 组件内部
问题 现在有一个需求,在中文环境下textView没有超过底层的组件限制,但是一切换到英文环境就超出了,这个如何解决呢?有啥例子吗? 就像这样子的。 解决 全部代码如下: <?xml version"1.0"…...
【力扣每日一题】2023.8.31 一个图中连通三元组的最小度数
目录 题目: 示例: 分析: 代码: 题目: 示例: 分析: 题目给我们一个无向图,要我们找出三个节点,这三个节点他们两两相连,这三个节点除了连接到对方的其他线…...
C语言--volatile
volatile 1、介绍 volatile是一个类型修饰符(type specifier)。它是被设计用来修饰被不同线程访问和修改的变量。如果没有volatile,基本上会导致这样的结果:要么无法编写多线程程序,要么编译器失去大量优化的机会。 …...
技术深入解析与教程:网络安全技术探秘
第一章:引言 在当今数字化时代,网络安全已经成为了重要议题。随着各种信息和业务在网络上的传输与存储,安全问题也日益突出。本文将带您深入探讨网络安全领域中的关键技术,涵盖渗透测试、漏洞挖掘以及恶意软件分析等方面…...
Android studio 实现生成二维码和扫描二维码
效果图 build.gradle(:app)添加依赖 dependencies {implementation com.google.zxing:core:3.3.3implementation com.journeyapps:zxing-android-embedded:3.6.0implementation com.google.zxing:javase:3.0.0 }Manifests.xml <uses-permission android:name"android…...
Linux中7种文件类型
Linux中文件类型 Linux中一切皆为文件。 查看文件类型(输入以下命令根据第一列的第一个字符可区别文件类型) ls -l目录文件 第一个字符为d 类似于Windows文件夹。 链接文件(软链接) 第一个字符为l 例如Windows的快捷方式&…...
基础算法--快速排序
快速排序 算法原理 1. 取一个元素p(第一个元素,最后一个元素,中间元素,随机 都可以),使元素p归位。 2. 列表被p分成两部分,左边都比p小,右边都比p大。 3. 递归完成排序。 动态演示 python代码实现 import…...
机器学习的第一节基本概念的相关学习
目录 1.1 决策树的概念 1.2 KNN的概念 1.2.1KNN的基本原理 1.2.2 流程: 1.2.3 优缺点 1.3 深度学习 1.4 梯度下降 损失函数 1.5 特征与特征选择 特征选择的目的 1.6 python中dot函数总结 一维数组的点积: 二维数组(矩阵)的乘法&am…...
Python 之__name__的用法以及解释
文章目录 介绍代码 介绍 __name__ 是一个在 Python 中特殊的内置变量,用于确定一个 Python 文件是被直接运行还是被导入为模块。 文件作为模板导入,则其 __name__属性值被自动设置为模块名 文件作为程序直接运行,则__name__属性属性值被自动设…...
【FPGA零基础学习之旅#12】三线制数码管驱动(74HC595)串行移位寄存器驱动
🎉欢迎来到FPGA专栏~三线制数码管驱动 ☆* o(≧▽≦)o *☆嗨~我是小夏与酒🍹 ✨博客主页:小夏与酒的博客 🎈该系列文章专栏:FPGA学习之旅 文章作者技术和水平有限,如果文中出现错误,希望大家能指…...
networkX-03-连通度、全局网络效率、局部网络效率、聚类系数计算
文章目录 1.连通度1.1 检查图是否连通1.2 检查有向图是否为强连通1.3 点连通度、边连通度: 2.网络效率2.1全局效率2.2 局部效率2.2.1 查找子图2.2.3 局部效率源码分析 3.聚类系数(Clustering Coefficient)3.1 聚类系统源码分析 教程仓库地址&…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
前端倒计时误差!
提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售,主打更强图形性能与沉浸式体验,支持多模态交互,受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理
引言 Bitmap(位图)是Android应用内存占用的“头号杀手”。一张1080P(1920x1080)的图片以ARGB_8888格式加载时,内存占用高达8MB(192010804字节)。据统计,超过60%的应用OOM崩溃与Bitm…...
RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)
RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发,后来由Pivotal Software Inc.(现为VMware子公司)接管。RabbitMQ 是一个开源的消息代理和队列服务器,用 Erlang 语言编写。广泛应用于各种分布…...
MinIO Docker 部署:仅开放一个端口
MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...
脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)
一、OpenBCI_GUI 项目概述 (一)项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台,其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言,首次接触 OpenBCI 设备时,往…...
从面试角度回答Android中ContentProvider启动原理
Android中ContentProvider原理的面试角度解析,分为已启动和未启动两种场景: 一、ContentProvider已启动的情况 1. 核心流程 触发条件:当其他组件(如Activity、Service)通过ContentR…...
Pydantic + Function Calling的结合
1、Pydantic Pydantic 是一个 Python 库,用于数据验证和设置管理,通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发(如 FastAPI)、配置管理和数据解析,核心功能包括: 数据验证:通过…...
