CSS实现文本溢出部分省略号代替

已于 2022-11-29 20:47:51 修改
阅读量186 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 前端 css
于 2022-11-29 20:23:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45834261/article/details/128104570
本文详细介绍了如何使用CSS实现文本内容的单行或多行显示，当内容超过容器长度时，通过`white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`来实现单行省略，以及利用`-webkit-box`, `-webkit-line-clamp`, 和 `-webkit-box-orient`控制多行显示并设置行数限制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.文字仅显示1行，溢出部分用省略号代替；CSS如何实现？（三行代码）

      white-space: nowrap;

      overflow: hidden;

      text-overflow: ellipsis;

2.文字仅显示N行，溢出部分用省略号代替；CSS如何实现？（五行代码）          

      overflow: hidden;                                溢出内容：隐藏起来

      text-overflow: ellipsis;                         如果出现文本溢出：用省略号代替

      display: -webkit-box;                          显示模式：WebKit专用的盒子

      -webkit-line-clamp: 2;                         行数固定(clamp)为：指定的数值

      -webkit-box-orient: vertical;                盒子中的多行如何排布：竖直

Css字体溢出显示省略号（实现单行多行显示省略号）
蓝胖子的博客
06-21 607
Css字体溢出显示省略号（实现单行多行显示省略号）
css文字超出省略号代替不起作用解决方法汇总大全
weixin_45136521的博客
02-22 8286
网上给的说法都是直接加上面的，而在移动端，需要再加上最后一行代码。 原文地址
css实现多行显示，超出部分以省略号代替
Amouzy的博客
03-08 1497
没处理之前 设置样式 给被包含元素设置以下样式（这里的案例是p元素）： p{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 效果： 明显，已经实现了只展示两行，超出部分以省略号代替 其中： overflow: hidden;的作用是隐藏溢出部分 display: -webkit-box;表示作为弹性伸缩盒子模型显示 -webkit-
html页面使用css样式展示固定字数，未能显示的字数以...(省略号)代替
weixin_45849851的博客
05-12 779
style=" overflow: hidden; text-overflow: ellipsis; white-space: nowrap;//文本不换行，这样超出一行的部分被截取，显示... "
css文本多行溢出后显示省略号代替
weixin_43818835的博客
04-03 628
大家都会说起因，那我是不是不说会不随潮流啊？ 诶 ， 那我就不说了 哈哈哈 直接说重点。 超出后用省略号有两种方式，看具体需求： 一，设置一行超出后省略号代替。代码如下： overflow：hidden； //代表的是超出后隐藏 white-space: nowrap; //禁止换行 text-overflow：ellipsis；//超出后省略号 二，设置多行超出后省略号代...
CSS实现多行文本溢出以省略号代替
qq_43467284的博客
11-04 211
CSS实现多行文本溢出以省略号代替 display: -webkit-box;// 将对象作为弹性伸缩盒子模型显示。 overflow: hidden;// 超出的文本隐藏 white-space: normal !important;// 溢出不换行(white-space: nowrap;) text-overflow: ellipsis;// 溢出用省略号显示 word-wrap: break-word;//用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产
css内容溢出省略号代替,CSS ... 文本溢出用省略号代替
weixin_32208021的博客
08-03 464
{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}text-overflow 属性规定当文本溢出包含元素时发生的事情。clip：修剪文本。ellipsis：显示省略符号来代表被修剪的文本。string：使用给定的字符串来代表被修剪的文本。white-space 属性设置如何处理元素内的空白。这个属性声明建立布局过程中如何处理元素中...
CSS 文本溢出 省略号代替
菜鸟吴de博客
09-28 154
CSS 文本溢出 省略号代替
【HTML/CSS】文本溢出部分显示省略号
吴小兽_
12-20 286
【代码】【HTML/CSS】文本溢出部分显示省略号。
css样式文本溢出隐藏用省略号代替
m0_72800528的博客
03-05 177
CSS超出文本指定宽度用省略号代替和文本不换行
09-24
本文将深入探讨如何使用CSS实现超出文本指定宽度用省略号代替以及禁止文本换行。 1. **一般文字截断** 当我们希望文本在特定宽度后被截断并用省略号表示时，可以使用以下CSS样式： ```css .text-overflow { ...
css 超出用省略号当标题字符溢出用省略号表示
09-25
CSS中处理标题文本溢出用省略号表示的方法是一项常见的网页设计技巧，主要应用于当列表项、标题等文本内容超出其容器宽度时，为了保持界面的整洁性，将超出部分用省略号（...）来代替。以下是从标题、描述以及部分...
CSS文本超出div或者span时用省略号代替
09-24
这时，CSS（层叠样式表）提供了一种方法，可以将超出容器宽度的文本用省略号“...”来代替。这个功能主要通过组合使用几个CSS属性来实现，包括`width`、`overflow`、`text-overflow`以及`white-space`。接下来，我们...
electron进程间通信- 从渲染进程到主进程
最新发布
唐璜Taro的博客
08-13 732
本文介绍了Electron中的IPC进程间通信机制，重点解析了从渲染进程到主进程的单向通信实现方式。这种设计既保证了功能实现，又遵循了Electron的安全通信原则，是开发桌面应用的常用模式。
基于SpringBoot校园管理系统
2501_90968670的博客
08-13 773
校园管理系统是一个基于Spring Boot + Vue.js的全栈应用，专注于高校内部的多角色协作管理。系统实现了院校管理、单位管理、用户管理、通知推送、投票管理等功能模块，满足管理员、院校管理员、普通用户三类角色的不同操作需求。核心目标是提升校园管理效率，实现通知精准推送与数据可视化统计。
前端工程化：pinia
西岭千秋雪的博客
08-11 639
本文介绍了Pinia作为Vue.js官方推荐的状态管理库，用以解决组件间数据共享和状态同步问题。文章首先说明状态管理的必要性，随后详细讲解Pinia的初始化配置，包括安装、挂载和Store创建（包含state、getter、action）。最后通过示例展示如何在组件中使用Store，实现数据获取和渲染。Pinia能有效简化复杂应用的状态管理，提升开发效率。
Next.js 国际化：打造多语言应用
zimin的专栏
08-12 1151
Next.js 作为一个全栈 React 框架，在构建全球性应用时，国际化（Internationalization, i18n）是不可或缺的功能。国际化允许应用支持多种语言和区域设置，实现语言检测、内容翻译和路由本地化，提升用户体验并扩大受众范围。Next.js 通过灵活的配置和库支持，如 next-i18next 或内置的 i18n 功能，简化了多语言应用的开发。i18n 的核心包括语言检测（根据用户浏览器或首选项自动切换语言）、内容翻译（使用 JSON 文件或第三方服务）和路由本地化（如 /en/
后端Web实战-MySQL数据库
sjdjjdkd的博客
08-13 809
MySQL官方提供了两个版本：商业版本（MySQL Enterprise Edition）该版本是收费的，我们可以使用30天。官方会提供对应的技术支持。社区版本（MySQL Community Server）该版本是免费的，但是MySQL不会提供任何的技术支持。本课程，采用的是MySQL的社区版本（8.0.34）1.SQL语句可以单行或者多行书写，以分号结尾。2、SQL语句可以使用空格/缩进来增强语句的可读性。3、MySQL数据库的SQL语句不区分大小写。
day23｜前端学习三件套
universe_01的博客
08-11 660
1、html和css。control shift+k能删掉光标所在那一行。3、找了一个新的html和css。css编写位置：行内样式（内联样式），内部样式，外部样式。基本选择器：通配选择器，元素选择器，类选择器，ID选择器。es6导出数据：分别导出，统一导出export ｛ ｝<ul>unordered list无序列表。<ol>order list 有序列表。使用何种导入方式，要根据导出方式决定。ES6模块化浏览器端应用广泛。inheritance继承。组合选择器，后代选择器。ahchor锚<a>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值