当前位置: 首页 > 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全栈优质领…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...