学习布局（13） 超出文本的处理

内容超出的处理：

overflow:

•     visible 默认值。内容不会被裁剪，会呈现在元素框之外
•     hidden: 内容会被裁剪，并且多余的内容不可见
•     scroll: 内容会被裁剪，但浏览器会显示滚动条以便查看其他内容
•     auto: 如果内容被裁剪，浏览器会显示滚动条
•     inherit: 从父元素继承overflow属性值

x 和 y 两个方向的控制：
     overflow属性的设置是针对水平、垂直两个方向的，如果只想针对其中一个方向， 可使用 overflow-x  overflow-y分别设置

实现文本超出隐藏:
    两种处理方式:

• 超出隐藏

• 超出显示为省略号

 

文本超出隐藏 ：

 .wrap {
            width: 200px;
            height: 40px;
            border: 2px solid black;
            line-height: 40px;
            overflow: hidden;
        }

<div class="wrap">
        单行文本 HTML5文本超出时,则显示隐藏
        单行文本 HTML5文本超出时,则显示隐藏
        单行文本 HTML5文本超出时,则显示隐藏
    </div>

文本超出显示省略号 ：

     .text-overflow {
            width: 400px;
            height: 40px;
            line-height: 40px;
            border: 2px solid black;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: keep-all;
            white-space: nowrap;
        }

 <div class="text-overflow">
        单行文本 HTML5文本超出时,则显示省略号
        单行文本 HTML5文本超出时,则显示省略号
        单行文本  HTML5文本超出时,则显示省略号
    </div>

 单行文本 超出显示省略号核心样式:

•     overflow: hidden;           // 超出的部分隐藏
•     text-overflow: ellipsis;    // 表示当前对象内文本溢出显示省略号，必须和overflow:hidden一起使用
•     word-break: keep-all;     // 对象内的文本不换行
•     white-space: nowrap;    // 对象内的文本不换行

  多行文本超出显示省略号：

 #con {
            width: 400px;
            line-height: 40px;
            border: 2px solid black;
        }

<div id="con">
        多行文本 HTML5文本超出时,则显示省略号
        多行文本 HTML5文本超出时,则显示省略号
        多行文本 HTML5文本超出时,则显示省略号
    </div>

   <script>
        var ele = document.getElementById('con');
        var text = ele.innerHTML;
        ele.innerHTML = text.substring(0,49) + '...';
    </script>

 overflow: scroll 与 overflow: auto的区别？

• 当文本超出时, 两者都会出现滚动条
• 当文本没有超出元素时，overflow: auto不会显示滚动条，而overflow:scroll依旧会显示