css - 使用 CSS 3 对图像及其文本进行动态样式设置

Question

我有一个菜单栏的背景图像，如下所示

并且每个框上都显示了四个常量文本。最右边的盒子是空的地方。此图像是由所有这些静态的四个垂直条制成的。

现在的问题是这四个文本是如此动态，并且针对不同情况具有可变长度。由于长度可变，当文本无法容纳在框内时，它与那些垂直条重叠。使用样式或其他方式处理这种情况的最佳选择是什么？

提前致谢。

Answer 1

案例 1：使用边框

您可以给链接 aborder-right而不是依赖图像。

.nav li a {border-right: 2px solid #000;}

案例 2：使用省略号

您可以text-ellipsis为这些链接提供一个并确保它们适合这些行：

.nav li a {max-width: 150px; text-ellipsis: ellipsis; overflow: hidden; display: inline-block;} /* Get this thing right */