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

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实现一行半文本的截取

最近遇到一个需求是要在第二行的中间截取文本&#xff0c;因为在后面得贴一个图标&#xff0c;所以这种情况用常规的css截取文本有点难处理。于是在上网查阅后发现了几个方法&#xff1a;第一种是用伪元素加定位&#xff0c;把.&#xff1b;11..盖在文字的上面&#xff1b;第二…...

计算一个区间时间差值,时间保留剩下的差值

解决目的 begin end&#xff0c;去除集合类的其他区间差值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 微信小程序添加隐私保护指引

隐私弹窗&#xff1a; <uni-popup ref"popup"><view class"popupWrap"><view class"popupTxt">在你使用【最美万年历】之前&#xff0c;请仔细阅读<text class"blueColor" click"handleOpenPrivacyContract…...

行业追踪,2023-08-30

自动复盘 2023-08-30 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…...

Redis——》Redis的部署方式对分布式锁的影响

推荐链接&#xff1a; 总结——》【Java】 总结——》【Mysql】 总结——》【Redis】 总结——》【Kafka】 总结——》【Spring】 总结——》【SpringBoot】 总结——》【MyBatis、MyBatis-Plus】 总结——》【Linux】 总结——》【MongoD…...

VTK——使用包围盒切割医学图像

VTK 库 vtkDICOMImageReader&#xff1a;专门用于读取医学图像格式 DICOM 的类。DICOM&#xff08;Digital Imaging and Communications in Medicine&#xff09;是医学图像和信息的标准。 vtkImageGaussianSmooth&#xff1a;用于图像的高斯平滑处理&#xff0c;主要用于去噪…...

在工具提示中使用自绘修改字体

在上一篇文章中&#xff0c;我们学习了如何在应用程序中添加工具提示。在之前的例子代码中&#xff0c;我们通过简单地为创建的工具提示设置了目标字体&#xff0c;这种方法很简单&#xff0c;因为自始至终&#xff0c;我们都只创建了一个工具提示。 但是&#xff0c;如果在应…...

【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 安装虚拟机镜像成功之后&#xff0c;只有光标&#xff0c;没有界面 在VMware上安装kali linux环境时&#xff0c;根据提示操作完成后&#xff0c;开启虚拟机&#xff0c;屏幕黑屏&#xff0c;左上角有一个光标在闪&#xff0c;一直开不了机。 出现问题的原因&#xff0c;…...

【Android】TextView适配文本大小并保证中英文内容均在指定的UI 组件内部

问题 现在有一个需求&#xff0c;在中文环境下textView没有超过底层的组件限制&#xff0c;但是一切换到英文环境就超出了&#xff0c;这个如何解决呢&#xff1f;有啥例子吗&#xff1f; 就像这样子的。 解决 全部代码如下&#xff1a; <?xml version"1.0"…...

【力扣每日一题】2023.8.31 一个图中连通三元组的最小度数

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 题目给我们一个无向图&#xff0c;要我们找出三个节点&#xff0c;这三个节点他们两两相连&#xff0c;这三个节点除了连接到对方的其他线…...

C语言--volatile

volatile 1、介绍 volatile是一个类型修饰符&#xff08;type specifier&#xff09;。它是被设计用来修饰被不同线程访问和修改的变量。如果没有volatile&#xff0c;基本上会导致这样的结果&#xff1a;要么无法编写多线程程序&#xff0c;要么编译器失去大量优化的机会。 …...

技术深入解析与教程:网络安全技术探秘

第一章&#xff1a;引言 在当今数字化时代&#xff0c;网络安全已经成为了重要议题。随着各种信息和业务在网络上的传输与存储&#xff0c;安全问题也日益突出。本文将带您深入探讨网络安全领域中的关键技术&#xff0c;涵盖渗透测试、漏洞挖掘以及恶意软件分析等方面&#xf…...

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中一切皆为文件。 查看文件类型&#xff08;输入以下命令根据第一列的第一个字符可区别文件类型&#xff09; ls -l目录文件 第一个字符为d 类似于Windows文件夹。 链接文件&#xff08;软链接&#xff09; 第一个字符为l 例如Windows的快捷方式&…...

基础算法--快速排序

快速排序 算法原理 1. 取一个元素p(第一个元素&#xff0c;最后一个元素&#xff0c;中间元素&#xff0c;随机 都可以)&#xff0c;使元素p归位。 2. 列表被p分成两部分&#xff0c;左边都比p小&#xff0c;右边都比p大。 3. 递归完成排序。 动态演示 python代码实现 import…...

机器学习的第一节基本概念的相关学习

目录 1.1 决策树的概念 1.2 KNN的概念 1.2.1KNN的基本原理 1.2.2 流程&#xff1a; 1.2.3 优缺点 1.3 深度学习 1.4 梯度下降 损失函数 1.5 特征与特征选择 特征选择的目的 1.6 python中dot函数总结 一维数组的点积&#xff1a; 二维数组&#xff08;矩阵&#xff09;的乘法&am…...

Python 之__name__的用法以及解释

文章目录 介绍代码 介绍 __name__ 是一个在 Python 中特殊的内置变量&#xff0c;用于确定一个 Python 文件是被直接运行还是被导入为模块。 文件作为模板导入&#xff0c;则其 __name__属性值被自动设置为模块名 文件作为程序直接运行&#xff0c;则__name__属性属性值被自动设…...

【FPGA零基础学习之旅#12】三线制数码管驱动(74HC595)串行移位寄存器驱动

&#x1f389;欢迎来到FPGA专栏~三线制数码管驱动 ☆* o(≧▽≦)o *☆嗨~我是小夏与酒&#x1f379; ✨博客主页&#xff1a;小夏与酒的博客 &#x1f388;该系列文章专栏&#xff1a;FPGA学习之旅 文章作者技术和水平有限&#xff0c;如果文中出现错误&#xff0c;希望大家能指…...

networkX-03-连通度、全局网络效率、局部网络效率、聚类系数计算

文章目录 1.连通度1.1 检查图是否连通1.2 检查有向图是否为强连通1.3 点连通度、边连通度&#xff1a; 2.网络效率2.1全局效率2.2 局部效率2.2.1 查找子图2.2.3 局部效率源码分析 3.聚类系数&#xff08;Clustering Coefficient&#xff09;3.1 聚类系统源码分析 教程仓库地址&…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...