[微信小程序] css 解决纯数字或字母不自动换行的问题、控制文字行数

效果

在这里插入图片描述

css 代码

word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

解释

word-break: break-all;

作用:这个属性允许在单词内部进行换行,即使单词很长也不会溢出容器,而是会在必要的地方打断单词以适应容器宽度。
示例场景:当你有一个固定宽度的容器,而其中的文本可能包含非常长的单词或URL时,这个属性可以防止文本溢出容器边界。

display: -webkit-box;

作用:这个属性是一个非标准的Webkit特定属性,它使得元素使用弹性盒模型(Flexbox的前身)。这允许使用-webkit-line-clamp和-webkit-box-orient属性。
示例场景:在需要使用Webkit特有的多行文本截断功能时使用。

-webkit-line-clamp: 2;

作用:这个非标准的Webkit属性限制了元素中显示的行数。例如,设置为2意味着元素中的文本将只显示前两行,其余部分将被裁剪。
示例场景:用于实现多行文本截断,特别是在Webkit浏览器中。

-webkit-box-orient: vertical;

作用:这个非标准的Webkit属性定义了弹性盒子内子元素的排列方向。vertical值意味着子元素将垂直堆叠。
示例场景:与-webkit-line-clamp一起使用,确保文本按垂直方向截断。

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

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

相关文章

FastAPI(七十七)实战开发《在线课程学习系统》接口开发-- 课程编辑和查看评论

源码见:"fastapi_study_road-learning_system_online_courses: fastapi框架实战之--在线课程学习系统" 课程编辑 先来看下课程编辑 1.判断是否登录 2.判断课程是否存在 3.是否有权限(只有自己可以修改自己的课程) 4.名称是否重复…

7月23日JavaSE学习笔记

异常: 程序中一些程序处理不了的特殊情况 异常类 Exception 继承自 Throwable 类(可抛出的) Throwable继承树 Error:错误/事故,Java程序无法处理,如 OOM内存溢出错误、内存泄漏...会导出程序崩溃 常见的…

区块链赋能民生大数据,共筑可信共享新生态

一、背景 在信息化浪潮的推动下,政府服务模式正经历着前所未有的变革。民生卡,作为连接政府与民众的桥梁,承载着居民享受多元化公共服务的重任。然而,部门间信息孤岛现象严重制约了服务效率与居民体验的提升。为此,民…

大厂面试官问我:ConcurrentHashMap底层原理?【后端八股文十五:Java集合合集】

本文为【Java集合 合集】初版,后续还会进行优化更新,欢迎大家关注交流~ hello hello~ ,这里是绝命Coding——老白~💖💖 ,欢迎大家点赞🥳🥳关注💥💥收藏&#…

【Golang 面试基础题】每日 5 题(十)

✍个人博客:Pandaconda-CSDN博客 📣专栏地址:http://t.csdnimg.cn/UWz06 📚专栏简介:在这个专栏中,我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话,欢迎点赞👍收藏…

vue3里将table表格中的数据导出为excel

想要实现前端对表格中的数据进行导出,这里推荐使用xlsx这个依赖库实现。 1、安装 pnpm install xlsx 2、使用 import * as XLSX from "xlsx"; 直接在组件里导入XLSX库,然后给表格table通过ref创建响应式数据拿到table实例,将实…

CSS 基础知识

CSS(级联样式表)是设置 Web 内容样式的代码。CSS 基础知识将介绍入门所需的内容。我们将回答以下问题:如何将文本设置为红色?如何使内容显示在(网页)布局中的某个位置?如何用背景图片和颜色装饰我的网页? 什么是CSS? 像HTML一样,CSS不是一种编程语言。它也不是一种标…

拉提查合创5步玩转git工具协作代码开发

1 工具使用场景 开发团队使用git版本管理工具,进行协作代码开发过程中,最常用的场景为: (1)拉取代码 将git远端仓库最新代码拉取到本地。 (2)提交代码 将本地新增修改的代码提交至git远端仓库中…

【Django】开源前端库bootstrap,常用

文章目录 下载bootstrap源文件到本地项目引入bootstrap文件 官网:https://www.bootcss.com/V4版本入口:https://v4.bootcss.com/V5版本入口:https://v5.bootcss.com/ 这里使用成熟的V4版本,中文文档地址:https://v4.b…

SpringBoot整合SSE技术详解

Hi 👋, Im shy SpringBoot整合SSE技术详解 1. 引言 在现代Web应用中,实时通信变得越来越重要。Server-Sent Events (SSE)是一种允许服务器向客户端推送数据的技术,为实现实时更新提供了一种简单而有效的方法。本文将详细介绍如何在SpringBoot中整合SSE,并探讨S…

Java的四种引用类型

Java的四种引用类型 1. 强引用(Strong Reference)2. 软引用(Soft Reference)3. 弱引用(Weak Reference)4. 虚引用(Phantom Reference) 💖The Begin💖点点关注…

go-kratos 学习笔记(4) 服务注册与发现 nacos注册

接口实现​ Registry 接口分为两个,Registrar 为实例注册和反注册,Discovery 为服务实例列表获取 type Registrar interface {// 注册实例Register(ctx context.Context, service *ServiceInstance) error// 反注册实例Deregister(ctx context.Context…

大模型算法面试题(十二)

本系列收纳各种大模型面试题及答案。 1、领域模型Continue PreTrain数据如何选取 在领域模型的Continue PreTrain(持续预训练)过程中,数据选取是一个至关重要的步骤,它直接影响模型在特定领域上的性能和泛化能力。以下是一些关于…

【机器学习】深入理解损失函数(Loss Functions)

🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础 ​💫个人格言: "如无必要,勿增实体" 文章目录 深入理解损失函数(Loss Functions)什么是损失函数?常见损失函数类型1. 均方误差…

OSPF概述

OSPF OSPF属于内部网关路由协议【IGP】 用于单一自治系统【Autonomous System-AS】内决策路由 自治系统【AS】 执行统一路由策略的一组网络设备的组合 OSPF概述 为了适应大型的网络,OSPF在AS内划分多个区域 每个OSPF路由器只维护所在区域的完整的链路状态信息 …

谷粒商城实战笔记-62-商品服务-API-品牌管理-OSS整合测试

文章目录 一,Java中上传文件到阿里云OSS1,整合阿里云OSS2,测试上传文件 二,Java中整合阿里云OSS服务指南引言准备工作1. 注册阿里云账号2. 获取Access Key3. 添加依赖 实现OSS客户端1. 初始化OSSClient2. 创建Bucket3. 上传文件4.…

ElasticSearch(七)— 相关性检索和组合查询

一、 相关性评分 全文检索与数据库查询的一个显著区别, 就是它并不一定会根据查询条件 做完全精确的匹配。除了模糊查询以外,全文检索还会根据查询条件给文档的相关性打分并排序,将那些与查询条件相关性高的文档排在最前面。 相关性( Relev…

Cocos Creator2D游戏开发-(1)初始化设置

初心: 做一款微信或者抖音小游戏,然后发布,对于我来说这是一个新的赛道; 写这些文档的原因,记录一下自己学习过程,下次用的时候方便找 cocos creator版本: 3.8.3 当前小游戏飞机大战教程来源于: 抖音: 禅影 chanying001 源码目录: https://www.kdocs.cn/l/caLr6XCbEfPa 创建一个…

【CN】Argo 持续集成和交付(一)

1.简介 Argo 英 [ˈɑ:ɡəu] 美 [ˈɑrˌɡo] Kubernetes 原生工具,用于运行工作流程、管理集群以及正确执行 GitOps。 Argo 于 2020 年 3 月 26 日被 CNCF 接受为孵化成熟度级别,然后于 2022 年 12 月 6 日转移到毕业成熟度级别。 argoproj.github.i…

关键词查找【Knuth-Morris-Pratt (KMP) 算法】

一个视频让你彻底学懂KMP算法_哔哩哔哩_bilibili KMP算法的核心是利用匹配失败后的信息,尽量减少模式串与主串的匹配次数以达到快速匹配的目的。 第一步:计算模式串(子串)和next[j]数组 模式串 前2位字母的next[j]固定是0 和 1 后续字母的nex[j]&…