-webkit-line-clamp 学习

最新推荐文章于 2024-06-18 14:45:06 发布
最新推荐文章于 2024-06-18 14:45:06 发布
阅读量3.5k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ISaiSai/article/details/52335104
版权
  1. 不需要指定整个块元素的高度，高度会被自动设置为两行的高度（指定后反而 会导致超出元素显示）
  2. 不需要指定 text-overflow:ellipsis;(就是点点点 且 不可修改)

overflow：hidden 是必须的
word-break:break-all;必须的，连续英文折行

完整DEMO

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-break: break-all;
overflow: hidden;

单行的比较简单


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

white-space:nowrap 实现一行显示完全 不折行的功能

ISaiSai
关注
关于 -webkit-line-clamp 详解
weixin_30443731的博客
08-25 5496
最近需要做个商品列表，在手机屏幕不太一样的市场里，如何做到列表中刚刚好显示2行，偶然间发现淘宝的手机版有用到-webkit-line-clamp来实现这种效果 限制在一个块元素显示的文本的行数。 -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 为了实现该效果，它需要组合其他外来的WebK...
webkitlineclamp css3,CSS webkit-line-clamp用法及代码示例
weixin_33251169的博客
08-03 1万+
-webkit-line-clamp属性用于限制块容器可能包含的行数。仅当显示属性设置为“ -webkit-box”或“ -webkit-inline-box”并且“ -webkit-box-orient”属性设置为“垂直”时，此属性才有效。用法:-webkit-line-clamp:none | integer | initial | inherit属性值：none:用于指定内容不会被钳位。它是...
-webkit-line-clamp 是什么？
m0_56699208的博客
01-29 2914
虽然自动添加的省略符号是 “…”, 但你可以使用伪元素和content属性来创建自定义的省略符号或文本。content: '阅读更多';bottom: 0;right: 0;
css3实现超过两行文字，超出用三个点显示（兼容性不行，仅供学习）
weixin_30323631的博客
11-08 568
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> p{ width:300px; height...
文字长显示...-webkit-line-clamp
weixin_48341937的博客
09-07 151
文字多显示...
css -webkit-line-clamp WebKit的CSS扩展(WebKit是私有属性)
09-27
在这个文本中，我们首先要了解的知识点是关于Webkit浏览器引擎的一个非标准CSS属性：-webkit-line-clamp。这个属性的用途在于限制一个块级元素内的文本显示行数，超出部分则通过省略号隐藏，从而达到所谓的“文本...
-webkit-line-clamp 控制文字显示多行，多出部分显示省略号
王建忠的博客
09-15 2384
-webkit-line-clamp是一个私有的、不在规范内的css属性，当这样使用的时候：display: -webkit-box; // 需配合的盒子属性 -webkit-line-clamp: 2; // 多少行后再多出时显示... -webkit-box-orient: vertical; // 默认水平，这里设置垂直可以达到这样的效果： 当然，加上固定height和overflow:hi
CSS -webkit-box-orient: vertical属性编译后丢失问题详解
01-19
-webkit-line-clamp: 2; -webkit-box-orient: vertical; 后来发现代码里写的好好的，一到页面上居然没有反应，和没写一个样，f12看了下，原来是-webkit-box-orient: vertical;这个属性丢失，导致了不生效，在Styles...
line-clamp 和 -webkit-line-clamp什么区别
03-31
-webkit-line-clamp 是 Safari 和 Chrome 浏览器私有的 CSS 属性，用于控制一个块元素显示的文本行数，当文本超出指定行数时，会自动省略多余部分并添加省略号（...）。它是早期 WebKit 引擎浏览器（如 Safari 和 ...
-webkit-line-clamp:2;设置显示文本行数
啊啊啊啊2
08-04 6867
HTML代码：效果：二、理解注意：-webkit-line-clamp是webkit的私有属性，是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性： display:...
2021-03-23
weixin_41612533的博客
03-23 285
-webkit-line-clamp -webkit-line-clampCSS 属性 可以把块容器中的内容限制为指定的行数. 它只有在display属性设置成-webkit-box或者-webkit-inline-box并且-webkit-box-orient(en-US)属性设置成vertical时才有效果 在大部分情况下,也需要设置overflow属性为hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsi...
CSS 04篇——关于position、overflow、text-overflow、-webkit-line-clamp等属性的使用（包括CSS元素内容溢出处理等）
@素素~的博客
12-28 1142
CSS 04篇——关于position、overflow、text-overflow、-webkit-line-clamp等属性的使用（包括CSS元素内容溢出处理等）
-webkit-line-clamp、-webkit-box-orient vue打包后不起作用
houdabiao的博客
09-06 2377
为了实现两行显示缩略显示，但是本地是可以显示，打包后不起作用 word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; 网上有这么说的  第一种 autop...
webkitlineclamp css3,css -webkit-line-clamp WebKit的CSS扩展(WebKit是私有属性)
weixin_35823099的博客
08-03 807
-webkit-line-clamp概述：-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property)，它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：display: -webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示 。-we...
Vue项目打包后css中的-webkit-line-clamp这个属性失效
hu104160112的博客
12-29 887
多行省略，可以使用-webkit-line-clamp属性，打包后却失效了 .htcon { margin-top: 5px; font-size: 13px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; over
Css的用法总结part4 line-clamp
Super Livia
02-04 1311
line-clamp 参考：line-clamp 限制在一个块元素显示的文本的行数。 -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列
-webkit-line-clamp 多行文字溢出...
热门推荐
菜鸟前端的博客
06-24 3万+
CSS代码： .box { width: 100px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } HTML代码： <div class="box"> 多行文字溢出多行文字溢出多...
-webkit-line-clamp vue打包后不起作用
冒烟筒的博客
03-04 940
安装依赖这个依赖： npm i -S optimize-css-assets-webpack-plugin 注释掉webpack.prod.conf.js中下面这段代码代码： new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true,...
--webkit-line-clamp、-webkit-box-orient打包之后不起作用
最新发布
weixin_43907110的博客
06-18 199
不生效原因：webpack打包的时候会将其忽略，如果使用了postCSS这个插件，打包时候会被去掉的，因为这个属性不是规范。–webkit-line-clamp、-webkit-box-orient打包之后不起作用。
-webkit-line-clamp属性
05-24
-webkit-line-clamp属性是一个用于控制多行文本溢出的CSS属性。它可以限制在一个块级元素中显示的文本行数，未被完全展示的行将会被用省略号“…”代替。该属性仅适用于单行文本和块级元素，并且需要与display: -webkit-box和-webkit-box-orient属性一起使用。例如，下面的代码可以限制一个div元素中显示的文本行数不超过3行： ``` div { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } ``` 值得注意的是，-webkit-line-clamp属性是一个WebKit私有属性，只能在WebKit浏览器中使用，其他浏览器需要使用类似的技术来实现相同的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值