css让一行文字超出的部分用省略号代替

怎么让一行文字超出的部分用省略号代替

<ul>
                <li>第一行文字比较长呀呀呀呀呀</li>
                <li>第二行文字比较长</li>
                <li>第三行文字</li>
            </ul>

要设置一下宽度，超出的部分就会被隐藏起来了。加背景颜色可以更好的看出效果

li{
                width: 140px;
                background-color: red;
                 overflow: hidden;      /*溢出隐藏*/
                white-space: nowrap;    /*规定文本不进行换行*/
                text-overflow: ellipsis;    /*当对象内文本溢出时显示省略标记（...）*/
            }

 微信小程序设置不超过2行

　　　　　　　　　　　　　　　　　　　　overflow: hidden;/*超出文本隐藏*/
				text-overflow:ellipsis; /*超出部分省略号显示 */
				display: -webkit-box;/*弹性盒模型*/
				-webkit-box-orient: vertical;/*上下垂直*/
				-webkit-line-clamp: 2;/*自定义行数*/