--webkit-line-clamp、-webkit-box-orient打包之后不起作用

于 2024-06-18 14:45:06 发布
阅读量97 收藏
点赞数 1
文章标签： webkit 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43907110/article/details/139770892
版权

css样式
–webkit-line-clamp、-webkit-box-orient打包之后不起作用

/*! autoprefixer: off */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 6;

		/*! autoprefixer: on */

用将其包裹起来。

/*! autoprefixer: off */
/*! autoprefixer: on */

不生效原因：webpack打包的时候会将其忽略，如果使用了postCSS这个插件，打包时候会被去掉的，因为这个属性不是规范。

小吴头大
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css -webkit-line-clamp WebKit的CSS扩展(WebKit是私有属性)
12-12
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： ...
CSS -webkit-box-orient: vertical属性编译后丢失问题详解
01-19
-webkit-line-clamp: 2; -webkit-box-orient: vertical; 后来发现代码里写的好好的，一到页面上居然没有反应，和没写一个样，f12看了下，原来是-webkit-box-orient: vertical;这个属性丢失，导致了不生效，在Styles...
vue -webkit-line-clamp不生效解决
书读百遍，其义自见
09-09 3446
设置css： /*！autoprefixer: off / -webkit-box-orient: vertical; -webkit-line-clamp: 2; /！autoprefixer: on / /! autoprefixer: on / 放自己的css代码 /! autoprefixer: off */ 注：前面有 ！
-webkit-line-clamp属性在IE上不生效的问题
诸葛韩信--一个前往前端不归路的浪子
08-20 3591
-webkit-line-clamp本身不是一个正式的css属性，它目前适用于webkit为内核的浏览器。 所以，当我们需要保存两行字符，多出的部分用“…”替代的话，那么IE上市不会成功的。 正常状态是这样： 而在IE浏览器上面是显示这样的： 解决的代码如下： .content { font-size: 14px; color: #4A4A4A; overflow: hidden; line-height: 26px; position: relative; height: 45
vue中使用-webkit-line-clamp、-webkit-box-orient属性，项目打包后不生效？
Allen-Ye博客
01-10 1935
在本地开发中，-webkit-box-orient就文字超出显示。。。是可以正常使用，可是把项目打包到服务器上面，这个功能就出问题，网上查资料看的说原因是： 会被打包的postCSS这个插件去掉的，好像是因为这个属性不是规范。 可以写在行内style里面，这样就不会被插件去掉了。 经过排斥然后有以下两种解决方法 解决方法： 第一种直接设置css： /*！autoprefixer: off */ -webkit-box-orient: vertical; -webkit-line-clam
css中限制行数( -webkit-line-clamp)出现三个点在打包时失效的解决方案
关中刀客在青岛
04-10 2459
在基于-webkit内核的浏览器中，多行文本限制行数，比如超过2行时，第二行结尾用三个点表示，实现如下： h4{ display: -webkit-box; overflow: hidden; -webkit-line-clamp:2; -webkit-box-orient: vertical; } 可以看出，后面两行有-webkit 前缀，就是这个属...
-webkit-line-clamp在苹果13/14机型在包含多标签的情况下表现异常的问题(目前仅在小程序测试过)
最新发布
konokidream的博客
11-23 571
由于苹果14*的问题，如果存在“特殊标签”的内容，它会默认把“特殊标签”模块当成一行，当lineRowCount为2时，就会出现的效果是仅在单行就会显示为省略号。在存在“特殊标签”的时候，同时也需要判断是否是苹果14*，需要lineRowCount再加一行或者根据标签的数量增加行数（未测试）
CSS3属性 line-clamp控制文本行数的使用
01-19
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的...
前端大厂最新面试题-single_multi_line.docx
06-06
* `-webkit-box-orient: vertical`：和 1 结合使用，设置或检索伸缩盒对象的子元素的排列方式 * `overflow: hidden`：文本溢出限定的宽度就隐藏内容 * `text-overflow: ellipsis`：多行文本的情况下，用省略号“…”...
CSS ellipsis 与 padding 结合时的问题详解
12-14
CSS 实现的文本截断 考察如下代码实现文本超出... -webkit-line-clamp: 4; } 使用如下的 HTML 片段进行测试： <style> .my-div { width: 300px; margin: 10px auto; background: #ddd; } </style>
html、css单行、多行文本溢出隐藏
嘿喵财运旺旺
09-26 740
单行： div{/* 单行溢出隐藏 */ width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 多行： div{/* 多行溢出隐藏 */ width: 150px;...
文本溢出隐藏显示省略号失效
weixin_43478592的博客
07-15 1194
之前百试百灵的代码，在这次却不生效了，找了半天都没找到失效原因，唉，惆怅。 附上之前的代码： overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 后台看到了某博客，瞎猫碰死耗子，试了一下： overflow:hidden; text-overflow:ellipsis; display:-webkit-box; /*
Vue项目打包后css中的-webkit-line-clamp这个属性失效
hu104160112的博客
12-29 841
多行省略，可以使用-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
vue运行,打包项目后css中使用的-webkit-line-clamp: 2这个属性不生效
weixin_40716786的博客
01-16 3135
在项目中要实现多行省略，会使用-webkit-line-clamp这个属性，-webkit-line-clamp: 2;代码如下 p{ word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflo...
-webkit-line-clamp vue打包后不起作用
冒烟筒的博客
03-04 907
安装依赖这个依赖： 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 vue打包后不起作用
houdabiao的博客
09-06 2346
为了实现两行显示缩略显示，但是本地是可以显示，打包后不起作用 word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; 网上有这么说的  第一种 autop...
CSS3 块级元素，文本溢出操作 -webkit-line-clamp
NARUTO_LUOLUO的博客
04-29 6329
大家经常用的css3属性text-overflow是针对单行文本溢出的操作，那块级元素的文本溢出要怎样处理呢？ 需要用到-webkit-line-clamp: 说明： 限制在一个块元素显示的文本的行数。 -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 为了实现该效果，
-webkit-line-clamp 实现限制文字显示多行，多余的用...代替
热门推荐
cyj_sky的博客
10-11 1万+
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -webkit-box：必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box
vue打包项目后使用-webkit-line-clamp: 2;这个属性不生效？
10-17 1068
在项目中要实现多行省略，-webkit-line-clamp: 2;打包后不生效，使用下面的方法： 1 word-break: break-all; 2 3 text-overflow: ellipsis; 4 5 display: -webkit-box; 6 7 -webkit-box-orient: vertical; 8 9 -we...
-webkit-box-orient: vertical; -webkit-line-clamp: 2;
07-13
-webkit-box-orient: vertical; 是一个WebKit浏览器私有的CSS属性，用于设置布局盒子的排列方向为垂直方向。它通常与其他属性一起使用，例如 flex 或者 -webkit-flex。 -webkit-line-clamp: 2; 也是一个WebKit浏览器私有的CSS属性，用于限制在一个元素中显示的文本行数。通过设置该属性值，可以使文本在超过指定行数后自动截断，并显示省略号。 需要注意的是，这两个属性都是WebKit浏览器私有的，因此在其他浏览器中可能不起作用。如果你希望在跨浏览器环境中实现类似的效果，可以考虑使用其他方法，例如使用 JavaScript 或者使用 CSS 的伪元素来创建省略号效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值