css实现列表信息最多展示三行然后...打点

本文链接：https://blog.youkuaiyun.com/weixin_43423291/article/details/114386190

今天写h5移动端碰到个需求，需要实现列表信息最多展示三行然后…打点，在这里记录一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
    p  {
    width: 200px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
  </style>
</head>
<body>
    <p>不敢做老虎，你就做绵羊。所以绵羊就是绵羊，老虎就是老虎，宝马就是宝马，桑塔纳就是桑塔纳，它们的本质是不一样的。

        绵羊的活法是对的，老虎的活法也是对的；桑塔纳的价格是合理的，宝马的价格也是合理的。
        
        所以，我是绵羊，就亮出我的风格；我是老虎，也要亮出我的风格，让你们看清楚，我从不掩饰。
        
        我经常告诉大家我就是这个东西，不需要什么包装，你喜欢这个东西就捡回家，不喜欢就不要动它，

    </p>
</body>
</html>