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

我相信有一个： text-overflow: ellipsis; CSS 设置，但不确定跨浏览器的可比性。

将其设置在容器上，它会为您提供 (...) 并将面包屑截断为容器的宽度。

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