css中文单行、多行超出省略号和英文换行（学习笔记）

一、单行超出省略显示。

.div1 {
    width:300px;
    height:200px;
     /* 单行 */
     text-overflow: ellipsis;//超出部分文字"..."显示
     overflow:hidden;//超出部分隐藏
     white-space: nowrap;//超出部分不换行
     /*white-space: pre-wrap;//只对中文起作用，强制换行。*/
}

二、多行超出省略显示

.div1 {
    width:300px;
    height:200px;
    /* 多行 */
    text-overflow: ellipsis;//超出部分文字"..."显示
    overflow: hidden;//超出部分隐藏
    display: -webkit-box;//将对象作为弹性伸缩盒子模型显示
    -webkit-line-clamp:2;//可以显示的行数
    -webkit-box-orient: vertical;//设置或检索伸缩盒对象的子元素的排列方式
}

三、英文换行：word-break和word-wrap中二选一使用即可

.div1 {
    width:300px;
    height:200px;
    /* 英文 */
    word-break: break-all; //只对英文起作用，以字母作为换行依据。
    /*word-wrap: break-word;//只对英文起作用，以单词作为换行依据。*/
}