css省略号

最新推荐文章于 2026-05-31 11:43:37 发布
原创 最新推荐文章于 2026-05-31 11:43:37 发布 · 234 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了CSS中实现文本一行和两行显示时省略号的效果。通过设置`white-space: nowrap`、`text-overflow: ellipsis`和`overflow: hidden`等属性，可以轻松实现单行文本省略。对于多行文本，利用`-webkit-line-clamp`和`-webkit-box-orient`属性，可以限制显示的文本行数并添加省略号。

/* 显示一行，省略号 */

    white-space: nowrap;

    text-overflow: ellipsis;

    overflow: hidden;

    word-break: break-all;

 

/* 显示两行，省略号 */

 text-overflow: -o-ellipsis-lastline;

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  line-clamp: 2;

  -webkit-box-orient: vertical;

标签
#css
哈喽前端
关注
CSS实现溢出显示省略号
sdasadasds的博客
12-27 3860
小伙伴们，对于省略号呢，咱们前端攻城狮的实现方法可就是多种多样了，那接下来呢我就给你罗列一下如果用css书写这些特殊效果，来一起看看吧~~~ 1.单行文本超出显示省略号 效果图： 实现代码: HTML部分 <h3>使用css实现单行省略号</h3> <div class="box1"> <a href="#" class="a1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ips
OpenHAB 3 MQTT绑定实战：从零搭建智能家居本地控制中枢
最新发布
weixin_30291791的博客
05-31 373
物联网（IoT）系统构建中，设备互联与统一管理是核心挑战。MQTT作为一种轻量级的发布/订阅消息传输协议，凭借其低功耗、低带宽占用和异步通信特性，成为连接异构设备的理想“通用语言”。其工作原理基于主题（Topic）路由，实现了设备与服务器间的解耦，极大地提升了系统的可扩展性和灵活性。在智能家居和工业物联网场景中，MQTT的价值在于能够无缝集成各类硬件，从开源硬件到商业设备。OpenHAB作为强大的开源家庭自动化平台，其MQTT绑定（Binding）功能正是实现这一集成的关键桥梁。本文将深入解析如何在Open
多行文字省略号和单行文字shenglueh
qq_35500778的博客
08-26 379
1.单行文字省略号 html: <view class="overflow-hiden"> 哈哈哈哈哈哈哈哈哈哈哈哈或哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈或或或或或或或或或 </view> CSS: .overflow-hiden{ width:500upx; margin:80upx...
CSS-设置文本省略号
qq_56726194的博客
06-08 1万+
写前端页面的时候很多情况下需要省略号，单行省略号设置单行文本省略号的写法 ：设置宽固定的宽度 ：width: 100px;设置不换行 ：white-space:nowrap;设置省略号：text-overflow: ellipsis;
css文本省略号
weixin_47948392的博客
06-19 176
单行省略号 white-space:nowrap; overflow:hidden; text-overflow: ellipsis; 多行省略号 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
CSS 省略号（单行省略号、多行省略号）
热门推荐
Ares5k
04-09 7万+
单行超出省略号代替、多行超出省略号代替
css超出部分显示省略号
富朝阳的博客
03-11 2145
CSS文本溢出就显示省略号，就是在样式中指定了盒子的宽度与高度,有可能出现某些内容在盒中容纳不下的情况，我们需要文本溢出就显示省略号。
CSS省略号的制作
ghjkfuihg的博客
07-13 5905
1.先强制一行内显示文本 white-space:nowrap;2.超出的部分隐藏溢出 overflow:hidden;3.文字用省略号代替超出的部分 text-overflow:ellipsis;一、给父元素设置1.溢出隐藏 overflow: hidden;2.设置行高与容器高度成倍数关系，这样避免文本溢出时，文字显示一半 line-height: 20px;3.设置文本对齐方式为两端对齐，这样在伪元素内容遮盖末
Css实现...省略号的效果
weixin_50643343的博客
01-08 5694
介绍：我们无论写练习或者写项目的时候，像用户名字过长或者文本信息过长需要用到省略号的效果，特此总结一下用法。是叭，我们给div加上overflow：hidden会隐藏掉，但是不太美观就需要用到省略号。还是先写基础代码，我们这次的div高度要大一些。本文分为单行省略号的实现和多行省略号的实现。
css 省略号表示
lieri111的专栏
12-08 548
   text-overflow:ellipsis;   overflow:hidden;   white-space:nowrap;
css显示省略号
谷雨2004的博客
02-28 299
-webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
怎么给css里添加省略号？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
04-21 907
代码实现 /* 单行文本溢出省略 */ .ellipsis { overflow: hidden; text-overflow: ellipsis; /* 文本溢出显示省略号 */ white-space: nowrap; /* 文本不会换行（单行文本溢出）*/ display: inline-block; } /* 两行文本溢出省略 */ .ellipsis-2 { ove...
Css实现省略号...及悬浮层显示全部内容的方法：
SunPeng的博客
01-13 3万+
1、单行文本省略： overflow: hidden;//溢出隐藏 white-space: nowrap;//禁止换行 text-overflow: ellipsis;//... 2、多行文本省略： display:-moz-box;//火狐 display: -webkit-box;//谷歌 -webkit-box-orient: vertical; -webkit-line-clamp: 3;//显示几行 overflow: hidden; 注： 英文自动换行： word-wrap:break-
CSS：省略号
weixin_34381666的博客
03-02 2万+
2019独角兽企业重金招聘Python工程师标准>>> ...
前端 CSS 经典：省略号
weixin_64684095的博客
11-20 4668
单行省略，双行省略，通用省略
CSS如果实现文本超出一行或多行时显示省略号...
qq_21280835的博客
03-12 2132
如果使用css样式实现文本超出单行或多行显示省略号，具体方法如下↓。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值