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

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;
}

相关文章:

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

需求&#xff1a;超过两行...展示 开发的过程中发现div内容中文可以换行英文不换行&#xff0c;导致长度会溢出。 是英文全英文的话浏览器会解析成一个单词&#xff0c; 加上这句就好了 word-break:break-all; 一开始不知道是会解析成一个单词&#xff0c;用字符串拼接处理…...

查各种金属非金属材料的物性参数方法

背景 上面给了任务&#xff0c;要做调研&#xff0c;各种材料的各种参数&#xff0c;高温的、低温的、常温的、常压的、高压的、低压的。 网上搜出来很多材料的参数都是各种卖材料的厂商给出的&#xff0c;也不晓得他们的测量结果可不可信&#xff0c;有没有一个权威机构背书…...

【数据库】查询PostgreSQL中所有表逻辑外键

引言 在PostgreSQL数据库中&#xff0c;逻辑外键是用于约束表之间关系的一种机制。然而&#xff0c;在某些情况下&#xff0c;我们可能需要删除和重建逻辑外键。本文将介绍如何查询PostgreSQL中所有表的逻辑外键&#xff0c;并指导您如何先删除再重新建立这些外键。 查询Post…...

【Kubernetes理论篇】2023年最新CKA考题+解析

文章目录 第一题&#xff1a;RBAC授权访问控制第二题&#xff1a;Node节点维护第三题&#xff1a;K8S集群版本升级第四题&#xff1a;ETCD数据库备份恢复第五题&#xff1a;NetworkPolicy网络策略第六题&#xff1a;Service四层负载第七题&#xff1a;Ingress七层负载第八题&am…...

【Linux】目录结构、路径

目录 1. 目录结构 1.1 基本概念 1.2 具体的目录结构 2. 路径 2.1 绝对路径和相对路径 2.2 特殊路径符 1. 目录结构 1.1 基本概念 Linux的目录结构是一个树形结构。 Windows系统可以拥有多个盘符&#xff0c;如 C盘、D盘、E盘。Linux没有盘符这个概念&#xff0c;只有一…...

Java-集合框架-List,Set,Map,队列

文章目录 Java集合框架&#xff1a;List&#xff0c;Set&#xff0c;Map&#xff0c;队列Java集合框架是什么&#xff1f;如何使用&#xff1f;ListSetMap队列 什么场景使用&#xff1f;优缺点是什么&#xff1f;ListSetMap队列 Java示例List示例Set示例Map示例队列示例 对比 J…...

第一章_线程基础知识

先拜拜大神 Doug Lea&#xff08;道格.利&#xff09; java.util.concurrent在并发编程中使用的工具包 为什么学习并用好多线程极其重要 硬件方面 摩尔定律失效 摩尔定律&#xff1a;它是由英特尔创始人之一Gordon Moore&#xff08;戈登.摩尔&#xff09;提出来的。其内容为…...

linux(centos7)定时关机解决方案

使用场景与痛点&#xff1a; 根据实际需求&#xff0c;每个星期五都要关闭服务器若干&#xff0c;痛点如下&#xff1a; 1是服务器比较多&#xff0c;按起来麻烦。2是因为周五时间点特殊&#xff0c;着急下班容易忘记关闭服务器。那些要关注才能看的博客&#xff0c;不是我喷&a…...

reactnative笔记

1、React Native 搭建开发环境和创建新项目并运行的详细教程_react项目怎么运行_AaVictory.的博客-CSDN博客 环境搭建遇到报错靠下面两个解决的&#xff08;模拟器的adb和reactnative的adb版本不同&#xff0c;且都配置环境&#xff09; 2、 adb server version (41) doesn‘t…...

软件架构模式+系统架构

架构模式对比 分层模式 一般信息系统中最常见的4层划分如下&#xff1a; Presentation layer 表示层&#xff08;也就是UI层&#xff09;Application layer 应用层&#xff08;也就是服务层&#xff09;Business logic layer 业务逻辑层&#xff08;也就是领域层&#xff09;…...

SQL 语句学习总结:

1. 四范式&&范式好处&#xff1a; 数据库范式是数据表设计的规范&#xff0c;在范式规范下&#xff0c;数据库里每个表存储的重复数据降到最少&#xff08;这有助于数据的一致性维护&#xff09;&#xff0c;同时在数据库范式下&#xff0c;表和表之间不再有很强的数据…...

【Linux】简单的小程序:进度条

在学习进度条之前&#xff0c;需要学一点预备知识。 1. 预备知识 回车换行 现在的换行符&#xff08;\n&#xff09;其实就是回车式换行符&#xff0c;另起一行&#xff0c;光标指向最新一行的开头。回车符&#xff08;\r&#xff09;是光标指向这一行的开头。 缓冲区 &a…...

Ansible之playbooks剧本

文章目录 一.playbooks介绍1.playbooks简述2.playbooks剧本格式3.playbooks组成部分4.运行playbooks及检测文件配置 二.模块实战实例1.playbooks模块实战实例2.vars模块实战实例3.指定远程主机sudo切换用户4.when模块实战实例5.with_items迭代模块实战实例6.Templates 模块实战…...

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

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

第六章,线性变换,1-线性变换、表示矩阵、线性算子

第六章&#xff0c;线性变换&#xff0c;1-线性变换、表示矩阵、线性算子 线性变换表示矩阵 线性算子 R 2 R^2 R2中特殊的线性变换旋转变换算子反射变换算子投影变换算子伸压变换算子剪切变换算子 玩转线性代数(32)线性变换的相关概念的笔记&#xff0c;相关证明以及例子见原文…...

15个关于AI的Github库

这里是我们精选的创新项目列表&#xff08;排名不分先后&#xff09;&#xff0c;这些项目正在机器学习和人工智能领域蓬勃发展 1&#xff1a;privateGPT 作者&#xff1a;imartinezGithub 星数&#xff1a;16.7K描述&#xff1a;利用LLM的力量&#xff0c;在没有互联网连接的情…...

在Jupyter 中 from XXX import * 报错

在Jupyter 中 导入模块会出现 from XXX import * 报错 但是 XXX.py 确实在同一个目录下&#xff0c;但是无法导入XXX中的XX方法 解决问题是 &#xff1a; 麻烦添加 import sys sys.path.append(./)通过执行 sys.path.append(‘./’) 这行代码&#xff0c;您将当前目录&am…...

小程序密码显示与隐藏的实现

默认密码隐藏起来&#xff08;显示为点&#xff09;&#xff0c;后面的图标是闭眼&#xff1b;用户点击图标后&#xff0c;图标变成睁眼&#xff0c;同时把密码明文显示出来&#xff1b;如此循环 Page({data: {passwordType: true, // 切换是否密码框show_pass: false // 是否…...

“亚马逊云科技创业加速器”首期聚焦AI,促进入营企业业务发展

生成式AI技术飞速发展&#xff0c;颠覆着人们的生活&#xff0c;正在掀起新一轮的科技革命。在生成式AI的浪潮中&#xff0c;亚马逊云科技旨在为中国的优秀初创企业提供全方位支持&#xff0c;助其抢占先机。 在6月底举办的亚马逊云科技中国峰会上&#xff0c;亚马逊云科技联合…...

已解决“SyntaxError: invalid character in identifier“报错问题

本文摘要&#xff1a;本文已解决 Python FileNotFoundError 的相关报错问题&#xff0c;并总结提出了几种可用解决方案。同时结合人工智能GPT排除可能得隐患及错误。 &#x1f60e; 作者介绍&#xff1a;我是程序员洲洲&#xff0c;一个热爱写作的非著名程序员。CSDN全栈优质领…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目&#xff0c;设置虚拟环境&#xff0c;出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

OCR MLLM Evaluation

为什么需要评测体系&#xff1f;——背景与矛盾 ​​ 能干的事&#xff1a;​​ 看清楚发票、身份证上的字&#xff08;准确率>90%&#xff09;&#xff0c;速度飞快&#xff08;眨眼间完成&#xff09;。​​干不了的事&#xff1a;​​ 碰到复杂表格&#xff08;合并单元…...