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

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

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