CSS 文字溢出:多行溢出、一行溢出

CSS 文字溢出:多行溢出、一行溢出

案例请点击查看文章详情。


代码如下:

  • 多行溢出设置

    css 复制代码
    .line-clamp-2{
    	/* height: 52px;
    	line-height: 25px; */
    	overflow: hidden;
    	word-break: break-all;
    	text-overflow: ellipsis;
    	display: -webkit-box;
    	-webkit-line-clamp: 2;
    	-webkit-box-orient: vertical;
    }
  • 单行溢出设置

    css 复制代码
    line-height: 25px;
    overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容)
    white-space: nowrap;(设置文字在一行显示,不能换行)
    text-overflow: ellipsis;(规定当文本溢出时,显示省略符号来代表被修剪的文本)

    text-overflow: ellipsis; 文本溢出隐藏

相关推荐
码海扬帆:前端探索之旅9 分钟前
深度定制 uni-combox:新增功能详解与实战指南
前端·vue.js·uni-app
谷雨不太卷15 分钟前
进程的状态码
java·前端·算法
打小就很皮...17 分钟前
基于 Python + LangChain + RAG 的知识检索系统实战
前端·langchain·embedding·rag
BJ-Giser25 分钟前
Cesium 烟雾粒子特效
前端·可视化·cesium
空中海26 分钟前
02 ArkTS 语言与工程规范
java·前端·spring
YJlio40 分钟前
7.4.5 Windows 11 企业网络连接与网络重置实战:远程访问、本地策略与故障恢复
前端·chrome·windows·python·edge·机器人·django
Slow菜鸟1 小时前
Codex CLI 教程(五)| Skills 安装指南:面向 Java 全栈工程师打造个人 ECC(V1版)
大数据·前端·人工智能
Lee川1 小时前
打字机是怎么炼成的:Chat 流式输出深度解析
前端·后端·面试
前端若水1 小时前
过渡(transition)高级:贝塞尔曲线、硬件加速
前端·css·css3
Lee川1 小时前
Token 无感刷新与 Logout:前端安全会话管理实战
前端·后端·react.js