18.文字超出部分用省略号替代:①单行文字溢出white-space: nowrap；overflow: hidden； text-overflow:ellipsis；②多行文字溢出③英文不自动换行

英文字母不换行用（因为英文不加空格被认为单词，不会自动换行）

word-break:break-all; 

一.单行文字溢出

            /* 这个单词的意思是如果文字显示不开，自动换行 */
            /* white-space: normal; */
            /* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
            white-space: nowrap;
            /* 2.溢出的部分隐藏起来 */
            overflow: hidden;
            /* 3.文字溢出的部分用省略号替代 */
            text-overflow: ellipsis;

 二.多行文字溢出

 /* 二.多行文字溢出:有兼容性的问题，交给后端更好 */
        .duo {
            width: 200px;
            height: 45px;
            background-color: blue;
            margin: 100px auto;
            /* 1.溢出的部分隐藏起来 */
            overflow: hidden;
            /* 2.文字溢出的部分用省略号替代 */
            text-overflow: ellipsis;
            /* 3.弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 4.限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 2;
            /* 5.设置或检索伸缩盒子对象的子元素的排列方式 */
            -webkit-box-orient: vertical;

        }