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; 文本溢出隐藏

相关推荐
代码不加糖几秒前
MessageChannel是什么,有什么使用场景?
前端·javascript
小小龙学IT5 分钟前
HTMX:让 HTML 重新成为前端核心的超轻量动态交互库
前端·html·交互
星栈5 分钟前
写 Makepad Demo 不难,难的是把它写成项目
前端·rust
用户059540174466 分钟前
localStorage清除策略踩坑实录:一个过期的token让我排查了3小时
前端·css
Nanachi8 分钟前
跨框架的前端源码定位,再加上点LLM
前端
人无远虑必有近忧!28 分钟前
fetch请求图片报跨域
前端·javascript
谢院柯29 分钟前
解决修改 node_modules 依赖库源码后重复安装问题的几种方案
前端
疯狂打码的少年32 分钟前
【程序语言与编译】NFA转DFA(子集构造法)
前端·笔记
半只小闲鱼33 分钟前
合并多个excel文件到一个文件中
前端·python·数据分析
fobwebs43 分钟前
Chrome谷歌浏览器多开教程,如何在电脑上同时登录多个GMAIL账号
前端·chrome·多开·同时登录多个gmail