CSS文本溢出显示为省略号

HTML,CSS学习笔记

CSS实现单行，多行文本超出时显示为省略号

1.单行溢出时，显示省略号

 	 width: 200px;
	 height: 50px;
	 border: 1px solid #cccccc;
	 overflow: hidden;
	 text-overflow: ellipsis;
	 white-space: nowrap;

显示结果：

2.单行或者多行溢出的时候，显示省略号

    //将对象作为弹性伸缩盒子模型显示
   display: -webkit-box;
   
   //设置或检索伸缩盒对象的子元素的排列方式
   -webkit-box-orient: vertical;
  
   //限制在一个块元素显示的文本的行数
   -webkit-line-clamp: 2;
 
   overflow: hidden;

//这里使用webkit，是因为为了让它适应于webkit浏览器和移动端

显示结果：

但是这里，如果你在文字后面加了很多数字的时候就会显示的不一样，

这时需要加 对数字和英文字母 折行的代码：

	word-wrap: break-word;
	word-break: break-all;

这样显示结果就很完美！

(上面笔记，如果对你有帮助请关注我，往后还会持续更新~~)