CSS技巧：让 div 显示在一行，超出自动以省略号代替
前几天给小站适配移动端的时候，遇到一个 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>