在CSS怎么设置出文本省略号显示，经过内容区域时文本文本全部显示，出内容自动换行

1.需求一：当文字超出给定宽度后，让文字省略号显示出来,鼠标经过时，文本内容全部显示，文本超出给定宽自动换行，代码如图：

1.  
   <div class="title1">
2.  
   当文字超出给定宽度后，让文字省略号显示出来,鼠标经过时，文本内容全部显示，文本超出给定宽自动换行
3.  
   </div>

只需设置经过这个div盒子的时候，通过设置over-flow:visible;white-space:normal;让盒子把超出部分正常换行显示即可，div盒子的style样式代码：

1.  
   .title1 {
2.  
   width: 200px;
3.  
   background-color: pink;
4.  
   height: 200px;
5.  
   overflow: hidden;
6.  
   white-space: nowrap;
7.  
   text-overflow: ellipsis;
8.  
   }
9.  
   .title1:hover {
10.  
    overflow: visible;
11.  
    white-space: normal;
12.  
    }

注意：text-overflow:ellipsis必须搭配over-flow:hideen才能起到超出文本省略号显示的效果(面试可能会问到哦！)

正常显示时效果如下图：

鼠标经过时效果如下图：

代码分享到这就结束了，想要了解了解white-space和text-overflow更多属性使用哦，有问题欢迎提出！

这篇好文章是转载于：学新通技术网