html - 水平 css 列表包装问题

Question

我正在尝试实现一个 css 水平列表，如果容器 div 宽度较小，它不应该 self 包装。例如，看看这个 fiddle :

http://jsfiddle.net/s5PBZ/1/

如您所见，只有两项:Lorem Ipsum 是可见的，因为 Dolor 的最后几个字母无法容纳在 div 中，因此列表被换行。但我希望所有内容都排成一行，即使某些文本被剪掉了。例如 - 我想要的输出是“Lorem Ipsum Dol”或其他内容，文本的其余部分应该溢出到 div 之外。

我尝试了各种组合

white-space: nowrap;

display: inline-block;

float: left;

但达不到预期的效果。

注意:我使用表格获得了结果，但我只是想知道我在这里做错了什么。

编辑:我想我在帖子中并不清楚。我必须设置表格宽度，实际上用户会在运行时设置表格宽度，我有一个这样的界面。虽然设置 ul 宽度可以解决问题，但元素数量是完全动态的。所以我不能只设置任何宽度。

Answer 1

就这样

.LongList ul li {
display: inline-block; /* add this , remove float and its done */
}

DEMO