CSS单、多行文本显示省略号

多行文本显示省略号

1.创建一个宽度为100px的div，要求2行文字显示省略号

    width: 100px;
    overflow: hidden; /* 超出部分隐藏 */
    display: -webkit-box; /* 设置为弹性伸缩盒模型 */
    -webkit-box-orient: vertical; /* 规定框的子元素垂直排列。 */
    -webkit-line-clamp: 2; /* 文本行数 */
    word-wrap: break-word; /* 长单词换行 */
    word-break: break-all; /* 总换行，word-warp和wrod-break同时写更保险，同时不写单词和数字字符等不会显示为省略号 */

2.创建一个宽度为100px的div，单行超出部分显示为省略号

方法一：

	width: 100px;
    overflow: hidden; /* 超出部分隐藏 */
    display: -webkit-box; /* 设置为弹性伸缩盒模型 */
    -webkit-box-orient: vertical; /* 规定框的子元素垂直排列。 */
    -webkit-line-clamp: 2; /* 文本行数 */
    word-wrap: break-word; /* 长单词换行 */
    word-break: break-all; /* 总换行，word-warp和wrod-break同时写更保险，同时不写单词和数字字符等不会显示为省略号 */

方法二：

	width: 100px;
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 隐藏文字显示为省略号 */
    white-space: nowrap; /* 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。如果不写汉字不会显示为省略号，数字和字母可以*/
}