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;/*追加这一行代码*/
}

追加代码后,问题解决!


至此,问题解决。

你可能感兴趣的:(错误汇总,css)