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

news2024/11/26 14:53:05

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

开发的过程中发现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.coloradmin.cn/o/938744.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

在云原生时代,构建高效的大数据存储与分析平台

文章目录 1. **选择适当的数据存储技术&#xff1a;**2. **采用分布式架构&#xff1a;**3. **数据分区和索引&#xff1a;**4. **采用列式存储&#xff1a;**5. **数据压缩和编码&#xff1a;**6. **使用缓存技术&#xff1a;**7. **数据分片和复制&#xff1a;**8. **自动化运…

水库大坝北斗RTK位移自动监测系统方案

一、方案背景 我国已拥有水库大坝9.8万余座&#xff0c;其中95%以上为土石坝&#xff0c;95%以上是上个世纪80年代以前建设的老坝。虽然近10年来我国进行了大规模的病险水库除险加固&#xff0c;但水库大坝数量多&#xff0c;土石坝多&#xff0c;出险的几率非常高。大坝作为一…

基于微信小程序的文化宣传平台的设计与实现(Java+spring boot+微信小程序+MySQL)

获取源码或者论文请私信博主 演示视频&#xff1a; 基于微信小程序的文化宣传平台的设计与实现&#xff08;Javaspring boot微信小程序MySQL&#xff09; 使用技术&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 微信小程序 后端&#xff1a;Java…

ESP32应用教程(0)— PMW3901MB光流传感器

文章目录 前言 1 传感器介绍 1.1 关键特征 1.2 关键参数 2 硬件概述 2.1 信号引脚 2.2 参考电路图 3 寄存器 3.1 寄存器列表 3.2 性能优化寄存器 4 代码说明 4.1 结构体说明 4.2 编译说明 5 波形分析 前言 本文介绍了在 ESP32 DEVKIT V1 开发板上开发 PMW3901MB…

C语言——pow(base, exponent)函数,求幂

这段代码是用来计算底数的指数幂的程序。它使用了math.h头文件中的pow函数来进行幂运算&#xff0c;并使用printf函数来输出结果。 在程序中&#xff0c;使用pow(base, exponent)来计算底数base的exponent次幂&#xff0c;并将结果存储在result变量中。然后使用printf函数来输…

JDBC驱动程序类型

JDBC驱动程序类型 JDBC驱动程序类型列表类型1 JDBC驱动程序类型2 JDBC驱动程序类型3 JDBC驱动程序类型4 JDBC驱动程序 JDBC驱动程序是一组Java类&#xff0c;用于实现JDBC接口&#xff0c;目标是特定的数据库。JDBC接口带有标准Java&#xff0c;但这些接口的实现是特定于您需…

Mycat教程+面试+linux搭建

目录 一 MyCAT介绍 二 常见的面试题总结 三 linux下搭建Mycat 一 MyCAT介绍 1.1. 什么是MyCAT&#xff1f; 简单的说&#xff0c;MyCAT就是&#xff1a; 一个彻底开源的&#xff0c;面向企业应用开发的“大数据库集群” 支持事务、ACID、可以替代Mysql的加强版数据库 一个可…

QQ六七年前的聊天记录怎么找?3招教你找回并恢复

友友们&#xff0c;六七年前的QQ聊天记录还有办法恢复吗&#xff1f;我之前的手机还能用&#xff0c;但是登录QQ后没有找到我想要的聊天信息&#xff0c;有没有其他方法能够找回&#xff1f; QQ聊天记录找不回来是一个非常困扰大家的问题。特别是好几年前的聊天记录&#xff0c…

SLAM从入门到精通(CMake编译)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 linux系统里面的编译和windows下面的编译不同&#xff0c;它没有什么特别好用的IDE。一般都需要自己写编译脚本。这项工作在以前可能很麻烦&#x…

cmd: Union[List[str], str], ^ SyntaxError: invalid syntax

跑项目在调用from easyprocess import EasyProcess 遇到报错&#xff1a; cmd: Union[List[str], str], ^ SyntaxError: invalid syntax猜测是EasyProcess版本与python版本不对应 pip show EasyProcess查证一下&#xff1a; WARNING: pip is being invoked by an old…

深入了解OpenStack:创建定制化QCOW2格式镜像的完全指南

OpenStack 创建自定义的QCOW2格式镜像 前言 建议虚机网络配置为 NAT 或 桥接&#xff0c;因为未来 KVM虚机 需要借助 虚机 的外网能力进行联网安装软件包 虚机在启动前&#xff0c;必须在 VMware Workstation 上为其开启虚拟化引擎 虚拟化 Intel VT-x/EPT 或 AMD-V 安装kvm …

【git进阶】 .ignore 忽略有道 忽略核查gitcheck-ignore -v

git .ignore配置 .ignore使用场景新项目中.gitignore用法1 初始化生成.git文件夹2 git status 查看当前文件夹状态3 创建.ignore文件 忽略不想上传的文件4 编辑.gitignore文件 git status查看是否生效 .gitignore进阶用法模式匹配模式匹配例题练习1 忽略所有的内容2 忽略所有目…

深入理解树状数组

大家好&#xff0c;我是 方圆。关于各类区间和问题有很多种解法&#xff0c;我们可以根据题目要求选择解题的方向&#xff1a; 数组不变&#xff0c;区间查询&#xff1a;前缀和、树状数组和线段树 数组单点查询&#xff0c;区间查询&#xff1a;树状数组 和线段树 数组区间修…

“业务敏捷的领导力” 工作坊 · 2023年9月3日

“业务敏捷的领导力”在线工作坊 2023年9月3日&#xff1b;9:30-11:30 am 授课工具&#xff1a;Zoom分组Miro画布互动练习 讲师&#xff1a;Jim Wang王军 报名条件 优先捷行学员免费参加&#xff0c;报名2023后半年课程的学员免费&#xff0c;工作坊限定30人&#xff0…

【附安装包】Fireworks CS6安装教程

软件下载 软件&#xff1a;Fireworks版本&#xff1a;CS6语言&#xff1a;简体中文大小&#xff1a;165.87M安装环境&#xff1a;Win11/Win10/Win8/Win7硬件要求&#xff1a;CPU2.0GHz 内存4G(或更高&#xff09;下载通道①百度网盘丨下载链接&#xff1a;https://pan.baidu.c…

STM32启动模式详解

文章目录 前置知识1. 单片机最小系统组成2. BOOT电路3. 三种启动模式4. 存储器映射 从主FLASH启动从系统存储区启动从SRAM启动 前置知识 1. 单片机最小系统组成 一个单片机最小系统由电源、晶振、下载电路、BOOT电路、和复位电路组成。少一个单片机都启动不了。 2. BOOT电路 …

华为云Stack的学习(二)

三、华为云Stack产品组件 FunsionSphere CPS 提供云平台的基础管理和业务资源&#xff08;包括计算资源和存储资源&#xff09;。采用物理服务器方式部署在管理节点。可以做集群的配置&#xff0c;扩容和运维管理。 Service OM 提供云服务的运维能力&#xff0c;采用虚拟化方…

线程基础:Java多线程的创建休眠与等待

目录 一.Thread 类是什么? 二.Thread 类的几个常见属性 三.线程创建 1. 继承Thread&#xff0c;重写 run 方法 2. 实现Runnable&#xff0c;重写 run 方法 3. 继承Thread&#xff0c;使用匿名内部类 4. 实现Runnable&#xff0c;使用匿名内部类 5. 使用 lambda 表达式…

大数据-玩转数据-Flink窗口

一、Flink 窗口 理解 在流处理应用中&#xff0c;数据是连续不断的&#xff0c;因此我们不可能等到所有数据都到了才开始处理。当然我们可以每来一个消息就处理一次&#xff0c;但是有时我们需要做一些聚合类的处理&#xff0c;例如&#xff1a;在过去的1分钟内有多少用户点击…

医疗器械行业的MES系统解决方案

医疗器械行业的MES系统&#xff08;制造执行系统&#xff09;解决方案是为医疗器械制造企业提供的一种集成化的信息技术系统&#xff0c;用于管理和监控制造过程&#xff0c;提高生产效率&#xff0c;确保产品质量&#xff0c;以及优化整个生产流程。MES系统通常涵盖了生产计划…