white-space，控制空白字符的显示，同时还能控制是否自动换行。它有五个值：normal | nowrap | pre | pre-wrap | pre-line
word-break，控制单词如何被拆分换行。它有三个值：normal | break-all | keep-all
word-wrap（overflow-wrap）控制长度超过一行的单词是否被拆分换行，是word-break的补充，它有两个值：normal | break-word
white-space
先看下white-space:nowrap时的情况：
不仅空格被合并，换行符无效，连原本的自动换行都没了！只有</br>才能导致换行！所以这个值的表现还是挺简单的，我们可以理解为永不换行。
white-space:pre：
空格和换行符全都被保留了下来！不过自动换行还是没了。保留，所以pre其实是preserve的缩写，这样就好记了。
white-space:pre-wrap：
显然pre-wrap就是preserve+wrap，保留空格和换行符，且可以自动换行。
white-space:pre-line：
空格被合并了，但是换行符可以发挥作用，line应该是new line的意思，自动换行还在，所以pre-line其实是preserve+new line+wrap。
打包一个文件，只需要常规的在入口的js文件引用 css文件即可， 打包成多个CSS文件，可以设置多个CSS入口，让webpack用 loader去打包。 和分割单独打包js文件一样。下面有两个例子。【例子来源】// 使用webpack 打包单独的postcss语法的css文件
/* webpack.config.js */
var precss = require('precss')
var cssnext = require('cssnext')
var autoprefixer = require('autoprefixer')
var cssnano = require('cssnano')
var Ex = require('extract-text-webpack-plugin')
module.exports = {
entry: './【path】/index.js',
/* index.js 里 require('./【name】.css')就好 我在看看文档是不是直接不用引入js文件 */
output: {
filename: 'index.js'
},
module: {
loaders: [{
test: /\.css$/,
loader: Ex.extract('style-loader', 'css-loader!postcss-loader') /*这里的写法注意下 */
}]
},
postcss: function() {
return [autoprefixer, cssnext, precss, cssnano]
},
plugins: [
new Ex("【name】.css")
]
}
//////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////
// 使用webpack 打包单独的多个postcss语法的css文件
var precss = require('precss')
var cssnext = require('cssnext')
var autoprefixer = require('autoprefixer')
var cssnano = require('cssnano')
var Ex = require('extract-text-webpack-plugin')
var webpack = require('webpack')
module.exports = {
entry: {
ac1: './src/actother.css',
ac2: './src/index.css'
},
output: {
filename: "[name].css"
},
module: {
loaders: [{
test: /\.css$/,
loader: Ex.extract('style-loader', 'css-loader!postcss-loader')
}]
},
postcss: function() {
return [autoprefixer, precss, cssnano, cssnext]
},
plugins: [
new Ex('[name].css')
]
