div文本长度超过div宽度变成三个点

<!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8">
<title>test</title>
<style>
    .test{
        width:200px;
        height:30px;
        line-height:30px;
        background:#ccc;
    }
    .line-limit-length {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...
    }
</style>
</head>
<body>
    <div class="test line-limit-length">div文本长度超过div宽度时会变成...的哦</div>
</body>
</html>

例图：

QQ截图20181125113347.png

fixed

没有一个冬天不可逾越，没有一个春天不会来临。最慢的步伐不是跬步，而是徘徊，最快的脚步不是冲刺，而是坚持。