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

Question

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

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

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

提前致谢。

Answer 1

案例1：使用边框

您可以为链接指定border-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 */