javascript - 椭圆化水平列表

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 以你想要的方式做到这一点。

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

将它设置在容器上，它会给你 (...) 并将面包屑 chop 到容器的宽度。

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