文本效果-white-space、overflow、text-overflow

目录

文本效果-补充

（1）white-space

（2）overflow

（3）text-overflow

---

文本效果-补充

（1）white-space

设置元素对内容中的空格、换行的处理方式

值	描述
normal	默认。文本空白 换行会被浏览器忽略。 换行会被解析为一个空格。
pre	保留文本原样式 比如空格或换行  能解析空格和换行，不会自动换行。
nowrap	文本不会换行，文本会在在同一行上继续（即使超出父盒子或者body也不换行，网页就会有滚动条），直到遇到br标签为止。
pre-wrap	保留空白符序列，保留换行符。如果文本超出容器宽度处没有换行符自动换行
pre-line	合并空白符序列（不能解析空格），保留换行符（能解析换行）。如果文本超出容器宽度处没有换行符自动换行
inherit	规定应该从父元素继承 white-space 属性的值。

（2）overflow

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。  超出部分隐藏
scroll	内容会被修剪，浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

如果父元素宽高能够包含子元素 auto就不会出现滚动条 scroll 就会出现滚动条

（3）text-overflow

用来控制超长溢出的文字内容的显示方式

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。

1、单行文本溢出  （以下三个一般一起用）  一定要加宽度

   div{
        width: 200px;
        height: 100px;
        border: 2px solid black;
        /* 强制一行显示*/
        white-space: nowrap;
        /* 超出部分隐藏 */
        overflow: hidden;
        /* 超出部分省略号 */
        text-overflow: ellipsis;
    }

2、多行文本溢出显示省略号  （一般不设置多行的，都设置单行的）

有较大的兼容性，适合用于webkit浏览器或移动端（移动端内核大部分是webkit内核）

1. -webkit-line-clamp：限制在一个块元素显示的文本的行数。为实现效果，它需要组合其他的WebKit属性。常见结合属性以下两点：

2. display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

3. -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

  div{
            width: 200px;
            /* 不要设置高度 */
            overflow: hidden;
            text-overflow: ellipsis;
            /* 1.必须结合的属性，将对象作为弹性伸缩盒子模型显示  */
            display: -webkit-box;
            /* 2.是一个 不规范的属性，它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性 */
            -webkit-line-clamp: 3;
            /* 3.必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical; 
       }

单词拆分

p{
    width:9em; 
    border:1px solid #000000;
    word-break:keep-all;
}