white-space,whitespacenowrap

word-wrap，white-space和word break的区别

word-wrap，white-space和word break的区别总结：

1、word-wrap是说明字数超过后是不是要换行，值为yes需要换行，值为no不换行

2、white-space:nowrap;用于处理元素内的空白，只在一行内显示。

3、word-break:break-all;用于处理单词折断。(注意与第一个属性的对比)

white-space属性详解

我们熟知的是：

1.在开发中，无论我们敲多少空格和回车，显示在页面上的都会合并成一个。

2.我们的文字在超过一行的情况下，就会自动换行。

但是开发的要求各种各样，white-space的功能属性也很强大，可以有各种各样的不同效果，下面来看一张图：

这个古诗是怎么打出来的呢？

床(空格)前(空格)(空格)(空格)(空格)明月光，疑是地上霜

（回车）

举头望明月，低头(Tab)思故乡

下面一个表格来说明一下出现这种情况的原因：

同样是320px的手机，iphone4可以在一行显示，但是安卓端就会有错位现象，这个开始让我很头疼，这样的话使用媒体查询也无法处理，所以在这一行的父元素中设置，所有的元素强制一行显示。

ul {

????white-space:nowrap;/*强制内容在一行显示*/

????overflow:hidden;/*超出部分隐藏*/

}

文字超出去怎么办？一般都自动换行了，想要文字溢出的部分自动用省略号表示，那么离不开三个属性:

white-space:nowrap;????/*强制内容在一行显示*/

overflow:hidden;????/*超出部分溢出*/

text-overflow:ellipsis;????/*溢出的部分使用省略号*/

如果是显示诗歌，或者文案之类的，很多情况需要输入什么样子，出来什么样子。

这个时候用pre属性是最合适的(毕竟兼容性最好么):

white-space:pre;

css white-space属性详解

css white-space这个css样式，用来设置element元素对内容中的空格的处理方式，有着几个可选值：normal,

nowrap,

pre,

pre-wrap,

pre-line

没有设置white-space属性，则默认为white-space:normal。normal表示合并空格，多个相邻空格合并成一个空格，在源码中的换行作为空格处理，只会根据容器的大小进行自动换行。

white-space:nowrap和normal一样，也合并空格，但是不会根据容器大小换行，表示不换行。

效果如下：这个效果在页面布局中使用很频繁，尤其在移动端布局中。

white-space:nowrap会导致文本不换行，经常和overflow,text-overflow一起使用，如下：

效果如下：

white-space:pre的作用是保持源码中的空格，有几个空格算几个空格显示，同时换行只认源码中的换行和

标签。

white-space:pre-wrap的作用是保留空格，并且除了碰到源码中的换行和

会换行外，还会自适应容器的边界进行换行。

效果如下：

white-space:pre-wrap和white-space:pre的区别就是会自适应容器的边界进行换行。

white-space兼容性

white-space详解

【目录】

white-space 属性 设置处理元素内的空白，所谓空白有哪些？

Space(空格)、Enter(回车)、Tab(制表符)

我们熟知的是：

但是开发的要求各种各样，white-space的功能属性也很强大，可以有各种各样的不同效果，下面来看一张图：

这个古诗是怎么打出来的呢？

下面一个表格来说明一下出现这种情况的原因：

同样是320px的手机，iphone4可以在一行显示，但是安卓端就会有错位现象，这个开始让我很头疼：

ios端

andriod

这样的话使用媒体查询也无法处理，所以在这一行的父元素中设置，所有的元素强制一行显示。

文字超出去怎么办？

一般都自动换行了，想要文字溢出的部分自动用省略号表示，那么离不开三个属性:

可以看到下面的效果:

如果是显示诗歌，或者文案之类的，很多情况需要输入什么样子，出来什么样子。

这个时候用pre属性是最合适的(毕竟兼容性最好么):

version1.0 —— 2018/4/23，首次创建white-space详解

?burning_韵七七