css文字超出省略号代替不起作用解决方法汇总大全 |
您所在的位置：网站首页 › 给div设置宽度不起作用 › css文字超出省略号代替不起作用解决方法汇总大全 |
|
先贴一个文字超出后显示省略号的css样式： 单行文字超出显示省略号： .cont{ overflow:hidden;/*内容超出后隐藏*/ text-overflow:ellipsis;/*超出内容显示为省略号*/ white-space:nowrap;/*文本不进行换行*/ }多行文字超出显示省略号： .cont{ overflow:hidden; /*内容超出后隐藏*/ text-overflow:ellipsis;/*超出内容显示为省略号*/ display:-webkit-box; /*将对象作为弹性伸缩盒子模型显示*/ -webkit-box-orient:vertical;/*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/ -webkit-line-clamp:2; /*这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。可根据需要设置超出多少行后显示省略号*/ }*如果你的项目中装了 autoprefixer 管理浏览器前缀的插件的话。这个插件不仅能够帮你加 -webkit- 之类的前缀，同时还会帮你删除在 less，css，sass 中的样式 。你会发现你在less文件中写的 -webkit-box-orient: vertical; 属性不见了 解决方法：关闭 autoprefixer 自动删除 .cont{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; /*! autoprefixer: off */ -webkit-box-orient:vertical; /* autoprefixer: on */ -webkit-line-clamp:2; }加入两行注释在 -webkit-box-orient:vertical;前后，使用注释关闭autoprefixer。注意：/*! autoprefixer: off */中的!号不能省略。 重点来了： 博主本人用的是vant框架做的移动端开发，以上方法都加上了，但是问题仍然不能解决，加上display:-webkit-box; 反而使得溢出显示省略号的效果失效了！！！ 单行省略没有影响，但是多行显示省略号就会有问题。因此，翻遍资料和博客找到如下解决方案： 点击进入参考原文地址 网上给的说法都是直接加上面的，而在移动端，需要再加上最后一行代码。 .cont{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; /*! autoprefixer: off */ -webkit-box-orient:vertical; /* autoprefixer: on */ -webkit-line-clamp:2; word-break:break-all;/*追加这一行代码*/ }追加代码后，问题解决！ 至此，问题解决。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |