css3英文文字换行,超过两行...展示

需求:超过两行...展示

开发的过程中发现div内容中文可以换行英文不换行,导致长度会溢出。

是英文全英文的话浏览器会解析成一个单词,

加上这句就好了

word-break:break-all;

一开始不知道是会解析成一个单词,用字符串拼接处理了,

        // 处理名称过长...显示if(item.name.length > 24){item.name = item.name.slice(0,24)+'...'}

 但是英文、数字占位比汉字要短,存在这种情况

 后来发现用css可以解决,

.practice-everyday{font-size: 36rpx;font-weight: bold;word-break:break-all;
<!-- 弹性伸缩盒子模型显示 -->display: -webkit-box;overflow: hidden;
<!-- ...展示 -->text-overflow: ellipsis;
<!-- 设置或检索伸缩盒对象的子元素的排列方式 -->-webkit-box-orient: vertical;
<!-- 限制在一个块元素显示的文本的行数 -->-webkit-line-clamp: 2;white-space: pre-line;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/113280.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

论文阅读_图形图像_U-NET

name_en: U-Net: Convolutional Networks for Biomedical Image Segmentation name_ch: U-Net&#xff1a;用于生物医学图像分割的卷积网络 addr: http://link.springer.com/10.1007/978-3-319-24574-4_28 doi: 10.1007/978-3-319-24574-4_28 date_read: 2023-02-08 date_publi…

高通开发系列 - 5G网络之QTI守护进程服务介绍

By: fulinux E-mail: fulinux@sina.com Blog: https://blog.csdn.net/fulinus 喜欢的盆友欢迎点赞和订阅! 你的喜欢就是我写作的动力! 返回:专栏总目录 目录 代码位置和依赖关系功能介绍代码逻辑讲解外设节点关注的目录socket服务端初始化DPM客户端监听守护关键的数据结构体…

宏基官网下载的驱动怎么安装(宏基笔记本如何安装系统)

本文为大家介绍宏基官网下载的驱动怎么安装宏基笔记本驱动(宏基笔记本如何安装系统)&#xff0c;下面和小编一起看看详细内容吧。 宏碁笔记本怎么一键更新驱动 1. 单击“开始”&#xff0c;然后选择“所有程序”。 2. 单击Acer&#xff0c;然后单击Acer eRecovery Management。…

MySQL事务原理、MVCC详解

事务原理 1 事务基础 1). 事务 事务 是一组操作的集合&#xff0c;它是一个不可分割的工作单位&#xff0c;事务会把所有的操作作为一个整体一起向系 统提交或撤销操作请求&#xff0c;即这些操作要么同时成功&#xff0c;要么同时失败。 2). 特性 原子性&#xff08;Atomi…

Java 数据库改了一个字段, 前端传值后端接收为null问题解决

前端传值后端为null的原因可能有很多种&#xff0c;我遇到一个问题是&#xff0c;数据库修改了一个字段&#xff0c;前端传值了&#xff0c;但是后台一直接收为null值&#xff0c; 原因排查&#xff1a; 1、字段没有匹配上&#xff0c;数据库字段和前端字段传值不一致 2、大…

卷积过程详细讲解

1&#xff1a;单通道卷积 以单通道卷积为例&#xff0c;输入为&#xff08;1,5,5&#xff09;&#xff0c;分别表示1个通道&#xff0c;宽为5&#xff0c;高为5。假设卷积核大小为3x3&#xff0c;padding0&#xff0c;stride1。 卷积过程如下&#xff1a; 相应的卷积核不断…

时序预测 | MATLAB实现SSA-XGBoost(麻雀算法优化极限梯度提升树)时间序列预测

时序预测 | MATLAB实现SSA-XGBoost(麻雀算法优化极限梯度提升树)时间序列预测 目录 时序预测 | MATLAB实现SSA-XGBoost(麻雀算法优化极限梯度提升树)时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 Matlab实现SSA-XGBoost时间序列预测&#xff0c;麻…

SpringBoot - Google EventBus、AsyncEventBus

介绍 EventBus 顾名思义&#xff0c;事件总线&#xff0c;是一个轻量级的发布/订阅模式的应用模式&#xff0c;最初设计及应用源与 google guava 库。 相比于各种 MQ 中间件更加简洁、轻量&#xff0c;它可以在单体非分布式的小型应用模块内部使用&#xff08;即同一个JVM范围…

利用逻辑回归判断病人肺部是否发生病变

大家好&#xff0c;我是带我去滑雪&#xff01; 判断肺部是否发生病变可以及早发现疾病、指导治疗和监测疾病进展&#xff0c;以及预防和促进肺部健康&#xff0c;定期进行肺部评估和检查对于保护肺健康、预防疾病和提高生活质量至关重要。本期将利用相关医学临床数据结合逻辑回…

嵌入式系统入门实战:探索基本概念和应用领域

嵌入式系统是一种专用的计算机系统,它是为了满足特定任务而设计的。这些系统通常具有较低的硬件资源(如处理器速度、内存容量和存储容量),但具有较高的可靠性和实时性。嵌入式系统广泛应用于各种领域,如家用电器、汽车、工业控制、医疗设备等。 嵌入式系统的基本概念 微控…

力扣2. 两数相加

2. 两数相加 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。 你可以假设除了数字 0 之外&#xff0c;这两个…

从《离婚律师》中学习代理模式

〇、前言 在2014年的时候&#xff0c;有一部非常火爆的电视剧叫做《离婚律师》&#xff0c;里面讲述了两名离婚律师池海东和罗郦的爱恨情仇&#xff0c;片子非常好看&#xff0c;当时我自己也怒刷了好几遍。 那么&#xff0c;在本剧的第四集中&#xff0c;有一段非常搞笑的剧情…

docker 04.更加重要的命令

之前的都是基础命令&#xff0c; 前台交互进程和后台守护进程&#xff1a; 重新进入容器&#xff1a; docker中的导入导出&#xff1a; docker中的拷贝到&#xff1a;

AliOS-Things引入

目录 一、简介 1.1 硬件抽象层 1.2 AliOS-Things内核 rhino ​编辑 1.3 AliOS-Things组件 二、如何进行AliOS-Things开发 三、安装环境 安装python pip git 修改pip镜像源 安装aos-cube 一、简介 AliOS-Things是阿里巴巴公司推出的致力于搭建云端一体化LoT软件。AliOS-…

centos升级python3.10,中间遇到问题,终于解决了

升级为python3.10 yum updateyum install openssl-devel bzip2-devel libffi-develyum groupinstall "Development Tools"wget https://www.python.org/ftp/python/3.10.2/Python-3.10.2.tgztar -xzf Python-3.10.2.tgzcd Python-3.10.2./configure --enable-optimi…

Spring Boot Actuator的Env端点存在本地文件包含(LFI)漏洞CVE-2020-5421

文章目录 0.前言1.参考文档2.基础介绍3.漏洞利用原理3.解决方案1. 升级Spring Boot版本2. 限制端点的访问3. 禁用环境端点4. 不公开敏感的Actuator端点5. 开启安全审计 0.前言 背景&#xff1a; Spring Boot Actuator的Env端点存在本地文件包含(LFI)漏洞CVE-2020-5421。被扫描到…

Pytorch学习:神经网络模块torch.nn.Module和torch.nn.Sequential

文章目录 1. torch.nn.Module1.1 add_module&#xff08;name&#xff0c;module&#xff09;1.2 apply(fn)1.3 cpu()1.4 cuda(deviceNone)1.5 train()1.6 eval()1.7 state_dict() 2. torch.nn.Sequential2.1 append 3. torch.nn.functional.conv2d 1. torch.nn.Module 官方文档…

沉浸式VR虚拟实景样板间降低了看房购房的难度

720 全景是一种以全景视角为特点的虚拟现实展示方式&#xff0c;它通过全景图像和虚拟现实技术&#xff0c;将用户带入一个仿佛置身其中的沉浸式体验中。720 全景可以应用于旅游、房地产、展览等多个领域&#xff0c;为用户提供更为直观、真实的体验。 在房地产领域&#xff0c…

node-red - 读写操作redis

node-red - 读写操作redis 一、前期准备二、node-red安装redis节点三、node-red操作使用redis节点3.1 redis-out节点 - 存储数据到redis3.2 redis-cmd节点 - 存储redis数据3.3 redis-in节点 - 查询redis数据 附录附录1&#xff1a;redis -out节点示例代码附录2&#xff1a;redi…

Java eight 解读流(Stream)、文件(File)、IO和异常处理的使用方法

目录 Java 流(Stream)、文件(File)和IO读取控制台输入读写文件FileInputStreamFileOutputStream Java目录 Java 异常处理 Java 流(Stream)、文件(File)和IO java.io 包几乎包含了所有操作输入、输出需要的类。所有这些流类代表了输入源和输出目标。 Java.io 包中的流支持很多种…