实现效果：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li {
/* 设置列表项目相关内容 */
list-style: none;
width: 200px;
height: 30px;
/* 设置对象的行高。 height: 30px;line-height: 30px;垂直居中 */
line-height: 30px;
/* 设置对象边框的特性 */
border: 1px solid pink;
/*1.强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行 */
white-space: nowrap;
/* 2.超出的部分隐藏 */
overflow: hidden;
/* 3.溢出的部分用省略号替代 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<ul>
<li>1.强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。</li>
<li>2.超出的部分隐藏。</li>
<li>3.溢出的部分用省略号替代。</li>
</ul>
</body>
</html>