scss文字折叠、换行、省略

需求

• 不换行，多余文字省略
• 换两行，多余文字省略，显示…

实现

• p 标签是默认是自动换行的

• word-break：break-all允许在单词内换行；break-word根据单词换行；keep-all只能在半角空格或连字符处换行；

• word-wrap：break-word根据单词换行；nomal正常换行

• white-space：nowrap不换行；normal正常换行；pre保留回车和空格并且不会自动换行；pre-line; //保留回车,多个连续的空格只保留一个,且会自动换行；pre-wrap; //保留回车,所有的空格并且会自动换行；

• 行内块

<template>
    <p class="text1">不换行且文字省略：你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你</p>
    <p class="text2">换两行加省略号：你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>
    <p class="text3">正常换行：你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>
</template>

<style lang="scss">
.text1 {
    width: 50px;
    overflow: hidden;  //超出的文本隐藏
    text-overflow: ellipsis;  //溢出用省略号显示
    white-space: nowrap;  //溢出不换行
}

.text2 {    
    overflow: hidden;  //超出的文本隐藏
    word-break: break-all;  //整体切割全部文字
    display: -webkit-box;  //将对象作为弹性伸缩盒子模型显示;
    text-overflow: ellipsis;  //溢出部分用省略号代替
    -webkit-line-clamp: 2;  //设置文本显示两行
    -webkit-box-orient: vertical;  //从上到下排列子元素;
    white-space: normal;
}

.text3 {
    word-wrap: break-word;
    word-break: normal;
}
</style>