css3 控制显示的行数多余的...省略

最新推荐文章于 2021-11-02 09:03:19 发布

置顶 AspNetSunny

最新推荐文章于 2021-11-02 09:03:19 发布

阅读量272

点赞数 1

分类专栏： CSS3 文章标签： css3 line-clamp overflow box-orient text-overflow

本文链接：https://blog.csdn.net/sunnywuxian/article/details/103615452

版权

CSS3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏


.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 1;/*控制显示的行数*/
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

在标签上添加以上样式即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

AspNetSunny

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

css3_设置文字在一行内显示，超出部分显示省略号

QiuRenBB的博客

12-09

6558

前言日常我们在做项目的过程中都会遇到需要给一行文字很多的情况下，设置…样式。正常情况下使用一下代码就能实现： white-space:nowrap; //段落中的文本不进行换行 overflow:hidden; //超出宽度部分隐藏 text-overflow:ellipsis; //当文本溢出时，要发生的事。有三个值： clip - 修剪文本；ellipsis - 显示省略号来代表被修剪的文本；string - 使用给定的字符串来代表被修剪的文本 width: xxx; //宽度自己设定，一

css设置显示几行多余显示省略号-样式不生效的解决方式

杜杜的博客

12-18

3075

显示一行，超出显示省略号　　overflow: hidden; 　　text-overflow:ellipsis; 　　white-space: nowrap; 显示多行，超出显示省略号 word-break: break-all; 　　text-overflow: ellipsis; 　　display: -webkit-box; 　　-webkit-box-orient: vertical; 　　-webkit-line-clamp: 2; //显示几行　 overflow: hidden;

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

css3 控制文本行数以省略号显示

朝花夕拾的博客

11-02

252

本文章以2行省略为例 text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;

CSS3属性—— line-clamp控制文本行数

weixin_30384031的博客

06-19

225

说明：限制在一个块元素显示的文本的行数。 -webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。 -webkit-bo...

css3实现文本指定行数，超出部分省略号代替

kafuka12的博客

09-20

1537

.text1 {/*单行*/ width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; -webkit-text-overflow:ellipsis; -moz-text-overflow:ellipsis; white-space:nowrap; } .text2

css3---line-clamp控制文本显示行数

qq_36145755的博客

07-01

844

-webkit-line-clampCSS 属性可以把块容器中的内容限制为指定的行数它只有在display属性设置成-webkit-box或者-webkit-inline-box并且-webkit-box-orient属性设置成vertical时才有效果在大部分情况下,也需要设置overflow属性为hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsis ). @mixin line2 { overflow:...

CSS3实现内容以指定行数显示，超出后显示省略号

知行合一，跬步致远

10-09

2246

-webkit-line-clamp 结合其他样式属性一起使用，可以实现内容指定行数来显示的效果，不过，它还是一个不规范的属性，没有被列入CSS 规范草案（不影响实现效果）。代码如下：与其他属性配合使用： -webkit-line-clamp:n; //设置行数，n为行数（必选） display: -webkit-box; //盒子模型（必选） -w...

微信小程序实现指定显示行数多余文字去掉用省略号代替

10-18

以上所述就是微信小程序实现指定显示行数多余文字去掉用省略号代替的方法，希望对正在从事微信小程序开发的朋友们有所帮助。在实际开发中，还需考虑文本内容的长度、用户的交互体验等细节问题，以达到最佳的显示效果...

css 省略号 css3让多余的字符串消失并附加省略号的实现代码

09-25

需要注意的是，CSS3标准中还提供了一个带浏览器前缀的版本-webkit-text-overflow，以确保在Webkit内核的浏览器（例如Chrome和Safari）上也能正常显示省略号效果。最后，为了更好地展示省略效果，通常还会指定容器...

css文字超出两行显示...

热门推荐

apurelotus的博客

05-26

16万+

今天做东西，遇到了这个问题，百度后总结得到了这个结果。首先，要知道css的三条属性。 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行这三个是css的基础属性，需要记得。但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？

CSS3多行显示省略号...

HTMl5自由者

06-20

6788

不用js也能控制第让他控制第几行省略： text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;

css如何控制文本显示行数

yunshangkeji的博客

06-30

7399

单行显示，超出部分隐藏为省略号，并且不换行p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }多行文本超出部分隐藏为省略号 p { display: -webkit-box; -webkit-box-orient:...

css3 实现控制文字固定行数，并显示省略号

weixin_30333885的博客

06-22

781

overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2;//想要的行数 -webkit-box-orient:vertical; 转载于:https://www.cnblogs.com/yuan9580/p/11069632.html...

CSS3控制文字只显示一行超出部分显示省略号

{丸の子}

08-08

2092

在编写网页的时候，我们希望文字不换行，特别是在新闻列表的时候，文字多了就添加省略号，不用程序去判断字符，英文和汉字的字符数量是不对应的，一个汉字占两个英文字符的位置，如果一行出现了英文字符，裁切就不准确了，不过用css可以办到控制文字只显示一行，超出部分显示省略号，如果需要强制换行，看最后首先来看一个例子： [code="html"] 省略我吧！省略我吧！省略我吧！省略我吧...

CSS 限制文字行数(超出显示省略号...)

卡尔特斯

10-26

2631

/* 单行隐藏 */ .xxx { /* 文本不换行 */ white-space: nowrap; /* 超出范围隐藏 */ overflow: hidden; /* 文字超出用省略号 */ text-overflow: ellipsis; } /* 多行隐藏 */ .xxx { /* 在恰当的断字点进行换行 */ word-break: break-all; /* 超出范围隐藏 */ overflow: hidden; /* 文字超出用省略号 */

CSS 限制文本显示行数

SillyBoy的博客

06-08

7975

文章目录CSS限制文本显示行数假设需求解决方案CSS样式示例Demo浏览器页面效果 CSS限制文本显示行数假设需求有若干段文本内容，要显示在一个盒子内，宽高限制；要求只能显示5行，超出的部分自动溢出隐藏，第五段末尾用省略号结尾。解决方案设置对象的盒子模型为弹性伸缩盒子display:-webkit-box; 设置伸缩盒子的子元素排列方式-webkit-box-orient:vertical; 溢出不换行white-space:nowrap; 设置显示的行数-webkit-line-cla

css3 控制显示的行数 多余的...省略

css3 控制显示的行数多余的...省略