CSS实现单行、多行文本溢出显示省略号（…）

最新推荐文章于 2024-12-31 20:58:29 发布

转载最新推荐文章于 2024-12-31 20:58:29 发布 · 476 阅读

html 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用CSS实现文本的单行或多行溢出隐藏效果，包括使用overflow、text-overflow和white-space属性进行单行文本截断，以及利用display、-webkit-box、-webkit-line-clamp等属性实现多行文本的优雅截断。

单行文本

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行文本

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; 	//行数
overflow: hidden;

参考：http://www.daqianduan.com/6179.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

咸鱼与梦想

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

多行文本溢出省略ellipsis...css/scss/js方法全总结

muzilanlan的专栏

02-19

1262

多行显示并在最后一行截断文字？ ---text-overflow基本知识请看上篇文章：text-overflow: ellipsis;什么时候可能不生效？单行文字我们为了能够截断文字，使用了 white-space: nowrap; // 强制文本在一行显示如果我确实有多行并在最后一行截断文字显示的需求呢？怎么实现？方法1 -Webkit-line-clamp property 优点: 最...

CSS 单行、多行文本溢出处理，纯css实现文本展开 / 收起

taiwuyang的博客

08-22

3516

在网页布局和样式设计中，处理文本溢出是一个常见的需求。为了在单行或多行文本过长时处理溢出情况，CSS 提供了几个有用的属性。本文将介绍如何使用这些 CSS 属性来处理文本溢出问题，包括单行和多行的情况。用于记录展开或收起的状态，它是这个功能的核心。限制块级元素显示的行数，这里限制为 3 行。设置或检索伸缩盒对象的子元素的排列方式。这是一个很长的文本，用于演示单行文…强制文本在一行内显示，禁止换行。的状态来实现类似的功能。超出容器的部分将被隐藏。这是一个很长的文本，用于。演示多行文本溢出时的省略。

参与评论您还未登录，请先登录后发表或查看评论

css---前端如何用css代码写省略号，单行省略号，多行省略号？

Wbiokr的博客

06-11

1万+

1、单行省略号width:100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;可以在scss中把width变为变量：@mixin overflow($width){ width:$width; overflow: hidden; text-overflow: ellipsis; whi

scss--控制几行内溢出隐藏并显示省略号

web_sea 的博客

01-14

1453

使用的是scss语法 $line:2;//行数这里是设置默认值、也可以调用的时候输入，常用于商品标题设置 @mixin overflow_omit($line:2) { -webkit-box-orient: vertical; text-overflow: ellipsis; -webkit-line-clamp: $line; overflow: hidden; display: -webkit-box; } ...

vue + scss,文本超过多行需要省略号，不起作用

qq_34164814的博客

11-12

1733

正常设置超过多行，显示省略号（仅部分浏览器支持） overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; 结果这样设置了，在vue+scss中不起作用，原因是，在scss编译的过程中，会去掉 -webkit-box-orient: vertical；的属性，需要在代码中添加 word-wrap: break-word; wo

前端封装 SCSS 多行省略

weixin_47588164的博客

08-22

这个 mixin 是一个强大的工具，用于处理多行文本溢出时的显示效果，特别适用于需要在有限空间内展示文本的场景。通过使用这个 mixin，你可以保持代码的简洁性和可读性，同时实现复杂的文本处理效果。更多详解点此。

CSS实现单行、多行文本溢出显示省略号的实现方法

09-22

在CSS中，实现文本溢出时显示省略号的方法分为单行文本溢出和多行文本溢出两种情况。这两种效果可以有效地处理页面内容超出预设区域时的显示问题，增强用户界面的整洁性。一、单行文本溢出显示省略号 对于单行...

BInyLU#blognews#CSS实现单行、多行文本溢出显示省略号（…）1

07-25

实现方法：效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。实现方法：效果如图：适用范围：该方法适用范围广，但文字未

一文大白话讲清楚CSS单行和多行文本溢出的省略样式

最新发布

xiaobangkeji的博客

12-31

896

一文大白话讲清楚CSS单行和多行文本溢出的省略样式

scss 超出2行省略文本配置

Yaince的博客

09-05

320

//超出部分省略号显示。@include ellipsisMore(3) //超出3行省略。

css文字超出元素省略,单行、多行省略

前端开发工程师博客

07-04

2209

效果图:通用CSS。

css 超出显示省略号

小星落

03-09

4114

单行超出显示省略号 .box{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100px; } 多行超出显示省略号 1、css实现多行文本超出省略号之直接用css属性设置(只有-webkit内核才有作用) 移动端浏览器绝大部分是WebKit内核的，所以该方法适用于移动端； .box{ overflow:hidden; 　　text-overflow:ellipsis; 　　displa

多行文本截断并出现省略号 纯CSS解决方案

ajhongshaorou的博客

04-18

7362

2016/4/18ps:博主上班半个月啦一直在忙万事开头难。。前几天碰到一个CSS的问题多行文本的截断还不能使用JS来做找了又找终于发现国外有个非常好的想法来跟大家分享一下，具体网站忘记了。。。如果有记得的发给我一下，毕竟是人家的创意。。。如下图：大家都知道，text-overflow是实现单行文本溢出隐藏的方式 overflow: hidden;/*溢出隐藏*/

scss、less 对浏览器兼容的处理方法, css 的单行溢出、多行溢出

weixin_30540691的博客

01-30

641

1. scss @mixin rounded($param1,$param2) { #{$param1}:$param2; -webkit-#{$param1}: $param2; -moz-#{$param1}: $param2; -ms-#{$param1}: $param2; -o-#{$param1}:$param2; } 使用方法：...

Css 文字省略样式（单行/多行）