Css 实现强制不换行、自动换行、强制换行、超出就显示省略号

white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;
white-space 属性设置如何处理元素内的空白
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

word-wrap: normal|break-word;
word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
normal 只在允许的断字点换行(浏览器保持默认处理)
break-word 在长单词或URL地址内部进行换行

word-break: normal|break-all|keep-all;
word-break 属性用来标明怎么样进行单词内的断句
break-all 允许再单词内换行
keep-all 只能在半角空格或连字符处换行

一、强制不换行

white-space:nowrap; 是禁止换行。
overflow:hidden; 是让多出的内容隐藏起来，否则多出的内容会撑破容器。

//让多出的内容以省略号...来表达
text-overflow:ellipsis; 但是这个属性主要用于IE等浏览器。
-o-text-overflow:ellipsis;Opera浏览器用 而Firefox浏览器没有这个功能，多出的内容只能隐藏起来。

二、自动换行

word-wrap: break-word; 
word-break: normal; 

word-break:break-all 和 word-wrap:break-word 都是能使其容器如DIV的内容自动换行，它们的区别在于：

1、word-break:break-all
假设div宽度为450px，它的内容就会到450px自动换行，如果该行末端有个很长的英文单词，它会把单词截断，一部分保持在行尾，另一部分换到下一行。

2、word-wrap:break-word
例子与上面一样，但区别就是它会把整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉。
三、强制换行

white-space: pre-wrap; 只对中文起作用，强制换行。
word-break: break-all; 只对英文起作用，以字母作为换行依据。
word-wrap: break-word; 只对英文起作用，以单词作为换行依据。

*注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。
span { display:block; }

四、文本强制N行超出就显示省略号
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数

display:block;
display:-webkit-box;
display: -moz-box;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow:hidden;
-webkit-line-clamp:2;//表示显示的行数
-webkit-box-orient: vertical;  

在实际项目中，我们会发现-webkit-box-orient没有生效
[产生原因] : autoprefixer自动移除老式过时的代码
[解决]
方法一: 添加注释关闭autoprefixer,但是若果有清除注释的插件,请将该插件设为false,否则不生效

/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

方法二:将autoprefixer设置为false,或者只是将移除功能关闭
autoprefixer:{remove:false}
需要注意的是cssnano里会有对autoprefixer的配置,而在使用webpack进行css压缩时有使用到optimize-css-assets-webpack-plugin插件,而这个插件实际上就是依靠cssnano来实现其功能,所以我们需要修改插件的配置(如下)

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
new OptimizeCSSPlugin({
   cssProcessorOptions: {
       safe: true, map: { inline: false }, 
       autoprefixer: { remove: false }  //添加对autoprefixer的配置

  }
})