文本不换行，多余的时候显示省略

/**有时候经常会在一些提示标题中或者表单、表格中用到，或者实现一个留言效果的时候，

可以像微信一样当字数多得时候使用省略号来隐藏部分内容，当我要看全文的时候，点击查看讲内容全部展开，具体方法就不说了，下面给大家两种实现文本不换行，多余的显示省略号得代码两种有时候有着不同的用途，具体使用方法就不多说了**/

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        ul{
            width: 500px;
            height: 100%;
            margin: 50px auto;
        }
        ul li{
            max-width: 500px;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid powderblue;
        }
        #box li{ /**第一种*/
            white-space: nowrap;    /*规定文本不换行**/
            text-overflow: ellipsis;  /**显示省略符号来代表被修剪的文本。*/
            overflow: hidden;
        } 
        #big li { /**第二种*/
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;   /** 多行文本溢出...*/
            overflow: hidden; 
        }
    </style>
</head>
<body>
<ul id="box">
    <li>委办公室举办青年党员演讲比 </li>
    <li>习近平：扎扎实实推进军民融合深度发展 为实现中国梦强军梦提供强大动力和战略支撑习近平：扎扎实实推进军民融合深度发展 为实现中国梦强军梦提供强大动力和战略支撑习近平：扎扎实实推进军民融合深度发展 为实现中国梦强军梦提供强大动力和战略支撑</li>
    <li>习近平在网信工作座谈会上的讲话全文发表习近平在网信工作座谈会上的讲话全文发表习近平在网信工作座谈会上的讲话全文发表 </li>
    <li>习近平：把人民海军全面建成世界一流海军习近平：把人民海军全面建成世界一流海军 </li>
    <li>市委常委会议召开 李同道主持并讲话 李峰梁宪廷出席 孙欣亮列席市委常委会议召开 李同道主持并讲话 李峰梁宪廷出席 孙欣亮列席</li>
</ul>
<ul id="big">
    <li>委办公室举办青年党员演讲比 </li>
    <li>习近平：扎扎实实推进军民融合深度发展 为实现中国梦强军梦提供强大动力和战略支撑习近平：扎扎实实推进军民融合深度发展 为实现中国梦强军梦提供强大动力和战略支撑习近平：扎扎实实推进军民融合深度发展 为实现中国梦强军梦提供强大动力和战略支撑</li>
    <li>习近平在网信工作座谈会上的讲话全文发表习近平在网信工作座谈会上的讲话全文发表习近平在网信工作座谈会上的讲话全文发表 </li>
    <li>习近平：把人民海军全面建成世界一流海军习近平：把人民海军全面建成世界一流海军 </li>
    <li>市委常委会议召开 李同道主持并讲话 李峰梁宪廷出席 孙欣亮列席市委常委会议召开 李同道主持并讲话 李峰梁宪廷出席 孙欣亮列席</li>
</ul>

</body>
</html>

文本不换行，多余的时候显示省略

猜你喜欢