overflow属性 和 单行文本超出变成省略号

overflow属性 和 单行文本超出变成省略号

overflow溢出属性（对父级设置）

它是用来处理 子级内容超出 当前容器的部分，主要是对 父级元素添加该属性。

值为：

hidden：超出部分 隐藏  !!!!!好用
scroll：滚动查看超出的部分（对于它有overflow-x和-y）
auto：自动渲染超出的部分

overflow-x 控制x轴方向的超出部分，overflow-y 控制y轴方向的超出部分

.wp {
           width: 200px;
           height: 200px;
           border: 10px #f0f solid;
           overflow: hidden; 
           overflow: auto;
       }

<div class="wp">
       <div class="son">一寸山河一寸血</div>
       <div class="son">十万青年十万军</div>
    </div>

单行文本超出，添加省略号

• white-space 属性，设置(超出)文本的格式

  nowrap 强制不换行

  normal 强制换行

• text-overflow :对超出的 文本内容 进行剪裁

  ellipsis 超出的文本内容变为 省略号

  clip 直接裁掉超出的文本内容

三者必不可少，overflow隐藏、white-space强制不换行、text-overflow超出的文本部分变省略号

 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis（省略号）;

代码如下：

.line {
            width: 300px;
            height: 30px;
            line-height: 30px;
            border: 1px #f00 solid;
            /* 三个必须都有 */
            /* overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis; */
        }

<p  class="line">一寸山河一寸血，十万青年十万军。一寸山河一寸血，十万青年十万军。一寸山河一寸血，十万青年十万军。一寸山河一寸血，十万青年十万军。一寸山河一寸血，十万青年十万军。</p>