Ellipsize水平列表

Question

我正在构建一个浏览系统，它包含通常的面包屑：

Home / dir1 / dir2

面包屑列表是<ul>列表。但是当列表增长时，有必要对它进行椭圆化处理。完美的解决方案将以这种方式运作：

|-- Width of the container's div ---|
 / Home / my / long / list / of / directories /

这将成为：

|-- Width of the container's div ---|
 / Home / (...) / of / directories /

但我不知道如何实现这一目标。如果我尝试用javascript做，我需要知道渲染列表的宽度，以便知道我是否必须进行椭圆化。这听起来很棘手。

欢迎提出任何建议。

Answer 1

你很难按照你想要的方式做到这一点。

我相信有一个：     文本溢出：省略号; CSS设置，但不确定浏览器的可比性。

将它设置在容器上，它会给你（...）并将面包屑截断到容器的宽度。

Javascript将允许您获取容器的宽度和列表的宽度，但我不知道您将如何去做我害怕。