break-word;
word-wrap:用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
text-overflow:ellipsis; 让多出的内容以省略号...来表达。但是这个属性主要用于IE等浏览器，Opera浏览器用-o-text-overflow:ellipsis; 而Firefox浏览器没有这个功能，多出的内容只能隐藏起来。
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
/* autoprefixer: off */ /* autoprefixer: on */解决-webkit-box-orient:vertical
-->
通俗点的解释：
word-break:break-all;只对英文起作用，以字母作为换行依据
word-wrap:break-word; 只对英文起作用，以单词作为换行依据
white-space:pre-wrap; 只对中文起作用，强制换行
white-space:nowrap; 强制不换行，都起作用
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）
案例：案例里面有注释，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
width: 100%;
margin: 200px 20%;
}
.indexBox1 {
width: 60%;
height: 100px;
font-size: 14px;
color: #ffffff;
display: flex;
justify-content: space-around;
}
/* 单行 */
.indexBox1 .box_text1 {
width: 100px;
height: 98px;
background: gray;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* word-break: normal;
word-wrap: none; */
}
/* 多行 */
.indexBox1 .box_text4 {
width: 100px;
height: 98px;
background: black;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
/* Firefox */
display: -moz-box;
/* autoprefixer: off */
-moz-box-orient: vertical;
/* autoprefixer: on */
/* Safari、Opera 以及 Chrome */
display: -webkit-box;
/* autoprefixer: off */
/*解决下面这个属性不显示*/
-webkit-box-orient: vertical;
/* autoprefixer: on */
/*解决上面这个属性不显示*/
/* 控制在第几行多出的内容省略 */
-webkit-line-clamp: 5;
}
.indexBox1 .box_text5 {
/* word-break: normal 关键词：css强制换行与超出隐藏完成单行与多行（代码案例）