【文本溢出】div固定宽度，文字输入超出盒子宽度，使文字自动换行

问题背景：

如下图（左图）所示，开发中遇到文本过长，虽然父元素设有宽度，子元素内的文本自动换行了，但UI没有给出文本高度。本着前端该有的意识，主动考虑了文本过长问题。

如下图（右图）所示，即使设置了文本高度，文本过长问题依然存在。

解决方法：

单行溢出

.line-cut {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

多行溢出

.line-cut-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

代码分析：

单行溢出

.line-cut {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

如果没有 white-space: nowrap; 就会如图：white-space: nowrap; 加上 overflow: hidden; 就会如图（左图）；在此基础上，再加上text-overflow: ellipsis;，就会如图（右图）：