前几天给小站适配移动端的时候,遇到一个 CSS 的问题,有个 div 在PC端显示正常,但是到了手机端,由于手机界面宽度较窄,发现自动换行了,显得很丑。我还是希望这个 div 显示在一行,超出部分内容则以省略号代替。如何修改 CSS 实现?找到一段说明代码,在此做个笔记:

<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.one li{
width: 300px;
overflow: hidden;/*超出部分隐藏*/
white-space: nowrap;/*不换行*/
text-overflow:ellipsis;/*超出部分文字以...显示*/
}
</style>
</head>
<body>
<ul class="one">
<li>测试内容1</li>
<li>测试内容2</li>
<li>测试内容3</li>
<li>测试内容4</li>
</ul>
</body>
</html>