文本溢出显示成省略号

主要用到的有三个样式：

			white-space: nowrap;         /* 强制文本在一行内显示 */
           
            overflow: hidden;             /* 溢出内容为隐藏 */
           
            text-overflow: ellipsis;      /* 文本溢出时显示省略标记 */

如下的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            width: 100px;
            border: 1px solid #ccc;
            margin:20px auto;
            padding: 4px;
        }
        li {    
            white-space: nowrap;
            /* 强制文本在一行内显示 */
            overflow: hidden;
            /* 溢出内容为隐藏 */
            text-overflow: ellipsis;
            /* 文本溢出时显示省略标记 */
        }
    </style>
</head>

<body>
    <ul>
        <li>是否良好的健康分裤亿万富豪覆盖度开始开发</li>
        <li>发的是感觉不会睡觉的功夫就会死的</li>
        <li>司法鉴定更何况还记得是北方的兰桂坊</li>
        <li>我发觉客观的环境国防建设</li>
        <li>违法干预口感十分公司的合法公司的黄金时代法国红酒</li>
    </ul>

</body>

</html>

页面显示的效果：
文本溢出显示成省略号