关于H5 移动端css 文本超出时省略号 失效的问题
之前写代码的时候遇到一个问题,就是用了下面这段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 文本超出时省略号 失效的问题的更多相关文章
- 不值一提,却又不得不提的“CSS文本超出部分省略号代替”
偶然看到一篇类似css技巧与经验总结的文章,其中有一部分非常熟悉,那就是“css控制元素内文本超出部分使用省略号代替”,一般实际工作中, 很多产品经理会对页面UI有这样的要求.还记得,第一次做这个功能 ...
- css文本超出部分省略号&CSS强制换行总结
word-break:break-all单词截断自动换行 word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congra ...
- CSS文本超出用省略号代替的方法
{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
- 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行,第二行省略号显示css方法
文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap; 强制文本不换行 折 ...
- CSS 文本溢出时显示省略标记
如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...
- css文本超出省略号
终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text ...
- CSS——文本超出隐藏显示省略号
文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...
- 文本超出显示省略号CSS
单行超出显示省略号 display: block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 多行超出显示省略号 1.普 ...
- css 文本超出容器长度后自动省略的方法!
我们在给用户显示文本内容的时候,往往需要避免文本内容超出容器宽度,防止换行溢出,小弟在网上找了下发现网上的实现仅仅只是实现了用 ...省略了的功能! 而并没有获取光标提示的功能,所有小弟就结合网上的代 ...
随机推荐
- JBPM学习第4篇:10分钟熟悉Eclipse
http://download.jboss.org/jbpm/videos/7.0.0.Final_eclipse_getting_started.swf 打开视频练习 1.导入 evaluation ...
- Maven+Spring+MySql 登陆实例
近来无事,复习复习Spring相关知识,从<Spring企业应用开发实战>这本书开始. 本文为学习<Spring企业应用开发实战>总结,著作权归原作者. 一.用Maven建立w ...
- Navicat工具、pymysql模块
一 IDE工具介绍(Navicat) 生产环境还是推荐使用mysql命令行,但为了方便我们测试,可以使用IDE工具,我们使用Navicat工具,这个工具本质上就是一个socket客户端,可视化的连接m ...
- c#开源项目收集
1百度云高速下载c#开源: https://github.com/ResourceHunter/BaiduPanDownloadWinform 2.IdaCsharp http://idacsharp ...
- 关于github改名问题
不喜欢github显示的目录名字于是百度了下,更改过程,记录下来,方便日后查看! 首页右上角点击出来菜单,找到Settings按钮点击 左侧找到Account账号菜单点击 找到change usern ...
- 准备Activiti开发环境
1.添加jar包 在activiti-5.13 -> wars 目录下 解压 activiti-rest.war ,导入WEB-INF\lib下所有包添加到classpath中. 由于使用的是O ...
- 01_Mac下安装homebrew
参考:https://jingyan.baidu.com/album/fec7a1e5ec30341190b4e7e5.html?picindex=3 1.在打开的命令行工具中输入如下语句: ruby ...
- 异步nodejs代码的同步样子写法样例
异步nodejs代码的同步样子写法样例 js的异步嵌套太深代码将不好看.尤其在用node的时候这种情况会大量出现. 这里用node连接redis,做一个用户注册的简单例子来说明.例如用redis做存储 ...
- php模拟post提交
<?php $url = "xxxxx"; // 用户名 $loginName = ''; // 密码 $pwd = ''; // service $serviceName ...
- Linq批量建表
public JsonResult CreateTable() { db = new RZBDbContext(); var query = (from c in db.Clients select ...