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

  • Post author:
  • Post category:其他



目录


文本效果-补充


(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;
}



版权声明:本文为qq_52301431原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。