之前写代码的时候遇到一个问题,就是用了下面这段css代码来让文字超出范围隐藏并显示省略号。

    overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: ;
-webkit-box-orient: vertical;

然鹅本地运行的时候是没有问题的,但是build之后发现失效了。仔细一看是 -webkit-box-orient: vertical; 没有起效。
最后各种修改之后发现应该是webpack的锅
解决方案是改成下面这样

    overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: ;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

关于H5 移动端css 文本超出时省略号 失效的问题的更多相关文章

  1. 不值一提,却又不得不提的“CSS文本超出部分省略号代替”

    偶然看到一篇类似css技巧与经验总结的文章,其中有一部分非常熟悉,那就是“css控制元素内文本超出部分使用省略号代替”,一般实际工作中, 很多产品经理会对页面UI有这样的要求.还记得,第一次做这个功能 ...

  2. css文本超出部分省略号&CSS强制换行总结

    word-break:break-all单词截断自动换行 word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congra ...

  3. CSS文本超出用省略号代替的方法

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

  4. 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行,第二行省略号显示css方法

    文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap;  强制文本不换行 折 ...

  5. CSS 文本溢出时显示省略标记

    如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...

  6. css文本超出省略号

    终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text ...

  7. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  8. 文本超出显示省略号CSS

    单行超出显示省略号 display: block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 多行超出显示省略号 1.普 ...

  9. css 文本超出容器长度后自动省略的方法!

    我们在给用户显示文本内容的时候,往往需要避免文本内容超出容器宽度,防止换行溢出,小弟在网上找了下发现网上的实现仅仅只是实现了用 ...省略了的功能! 而并没有获取光标提示的功能,所有小弟就结合网上的代 ...

随机推荐

  1. MySQL在DOS界面对database和table增删改查

    昨天新接触MySQL,学习了一些内容,今天过来复习一下.(吐槽一下:安装个MySQL耗费老子半天时间!!) 学习了一下,大概知道了对数据库基本的增删改查,增add,删drop,改alter,查show ...

  2. JS十进制转二进制(控制位数)

    主要需求:十进制转二进制,可以控制指定的位数. 转化显示后的二进制数为bin-bit中输入的数字宽度.dec-number为5,bin-bit为5,则转化后数字为00101.如果bin-bit小于转化 ...

  3. 参数化查询为什么能够防止SQL注入 (转)

    很多人都知道SQL注入,也知道SQL参数化查询可以防止SQL注入,可为什么能防止注入却并不是很多人都知道的. 本文主要讲述的是这个问题,也许你在部分文章中看到过这块内容,当然了看看也无妨. 首先:我们 ...

  4. 06_zookeeper原生Java API使用

    [Zookeeper构造方法概述] /** * 客户端和zk服务端的连接是一个异步的过程 * 当连接成功后,客户端会收到一个watch通知 * * ZooKeeper(String connectSt ...

  5. 寒假来了,阿里游戏云6000、20000元新春大礼,游戏开发的骚年们r u ready?

    寒假来了,游戏开发的骚年们,r u ready? 亿元云计算基金.游戏云计算解决方案.尊享VIP服务,为你“三羊开泰”! 现在参与游戏云认证,即享6000元.2万元… 最高100万云基金!走你> ...

  6. makefile 通配符了解% $@ $^ $<

    把目录下所有文件都编译的命令. 1 all:$(subst .c,.o,$(wildcard *.c)) 2 3 %.o:%.c 4 gcc -o $@ $< 下面是几个特舒符号的意思: $@: ...

  7. 初学scrum及首次团队开发

    一.初学scrum 1.什么是scrum Scrum在英语的意思是橄榄球里的争球.而在这里Scrum是一种迭代式增量软件开发过程,经常性的被用于敏捷软件开发.Scrum包括了一系列实践和预定义角色的过 ...

  8. IE的兼容性设置 X-UA-Compatible

    < meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" /> 是IE8 ...

  9. 微信公众号 报token验证失败

    最近两天一直碰到token验证失败的问题,如下图所示 然后上网疯狂的搜索答案,碰到的人还真不少,原因大概有这几个: 1)服务器URL未实名认证 2)token重名(基本不可能) 3)服务器部署的项目 ...

  10. jdk1.8 对数组及arrays类对数组的操作与增强

    数组的初始化有两种方式 静态初始化: 初始化时由程序员显示置顶每个数组的初始值,由系统决定数组长度.如: int[] a1 = new int[] {1,2,3,4}; 动态初始化:初始化时由程序员只 ...