当前位置: 首页 > 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 聚类系统源码分析 教程仓库地址&…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...