之前写代码的时候遇到一个问题,就是用了下面这段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. VS编译优化

    程序的调试是任何一个程序必做的“功课”,当然在调试的过程中肯定会或多或少的遇到一些问题.如果每次关掉,修改,然后在启动,浪费不少时间和经历,尤其是在不确定的情况下尝试修改,启动的次数会更多.如果你要调 ...

  2. JS埋点 小结

    今天在看<大型网站性能监测.分析与优化>一书,提到性能监测方式,才知道有这个名词 “JS埋点”. 大概作用:通过在web页面中,添加js脚本,实现对页面性能监测(如加载时间.服务器响应时间 ...

  3. SASS和LESS等优缺点对比,使用方法总结 (笔记大全)

    sass优点: 用户多,更容易找到会用scss的开发,更容易找到scss的学习资源: 可编程能力比较强,支持函数,列表,对象,判断,循环等: 相比less有更多的功能: Bootstrap/Found ...

  4. 洛谷P1600 天天爱跑步(差分 LCA 桶)

    题意 题目链接 Sol 一步一步的来考虑 \(25 \%\):直接\(O(nm)\)的暴力 链的情况:维护两个差分数组,分别表示从左向右和从右向左的贡献, \(S_i = 1\):统计每个点的子树内有 ...

  5. Spring 框架(一)

    1 spring框架概述 1.1 什么是spring l Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert ...

  6. easyui扩展行默认展开 以及 去除滚动条

     问题背景: 在做打印页面的时候,要求有详细的默认展开显示.    遇到的问题: 1)在用扩展行的时候,grid的所有行都添加了展开收起的图标,(第二行没有明细)如下  2)默认展示有详细行的时候,内 ...

  7. Fundmentals in Stream Computing

    Spark programs are structured on RDDs: they invole reading data from stable storage into the RDD for ...

  8. 3 TFRecord样例程序实战

    将图片数据写入Record文件 # 定义函数转化变量类型. def _int64_feature(value): return tf.train.Feature(int64_list=tf.train ...

  9. 面试准备5之rest-framework部分

    rest-framework部分 1.你理解的Http协议? 答:1超文本协议,基于tcp协议的应用层协议,端口号80 本质就是一个socket客户端.请求-->响应-->断开 2 无连接 ...

  10. salt 之 master and minion

    系统:centos7.2 master:192.168.1.41minion:192.168.1.46 注释: setenforce 0 --关闭selinux systemctl stop fire ...