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 聚类系统源码分析 教程仓库地址&…...
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 (1)连接查询(JOIN) 内连接(INNER JOIN):返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...
Frozen-Flask :将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是:将一个 Flask Web 应用生成成纯静态 HTML 文件,从而可以部署到静态网站托管服务上,如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

Cinnamon修改面板小工具图标
Cinnamon开始菜单-CSDN博客 设置模块都是做好的,比GNOME简单得多! 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来,实在找不到,希望有大佬教一下我。 还有就会议时间,我感觉不是图片时间,因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
Xen Server服务器释放磁盘空间
disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)
前言: 最近在做行为检测相关的模型,用的是时空图卷积网络(STGCN),但原有kinetic-400数据集数据质量较低,需要进行细粒度的标注,同时粗略搜了下已有开源工具基本都集中于图像分割这块,…...

视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...