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 聚类系统源码分析 教程仓库地址&…...

19c补丁后oracle属主变化,导致不能识别磁盘组
补丁后服务器重启,数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后,存在与用户组权限相关的问题。具体表现为,Oracle 实例的运行用户(oracle)和集…...

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

MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域,MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步,这两种通讯协议也正在被逐步融合,形成了一种新型的通讯方式——开疆智能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 中的一种 系统属性定义文件(System Property Definition File),用于声明和管理 Bluetooth 模块相…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试,通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小,增大可提高计算复杂度duration: 测试持续时间(秒&…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章,二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑: 🔄 一、起源与初创期:Swagger的诞生(2010-2014) 核心…...
大数据学习(132)-HIve数据分析
🍋🍋大数据学习🍋🍋 🔥系列专栏: 👑哲学语录: 用力所能及,改变世界。 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言Ǵ…...

AI书签管理工具开发全记录(十九):嵌入资源处理
1.前言 📝 在上一篇文章中,我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源,方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包,彻底改变了静态资源管理的…...

C# 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...