附加换行不超过一行的交替子图像和文本项

Question

我正在使用javascript将一系列子项附加到一个空的根DOM元素中。

子项目是成对的，一个16x16的图像，然后是一些文本。

现在我没有用css做任何特别的事情：

空根元素的css

.breadcrumb-cls {
    text-align : left;
 }

对的img元素的css

.breadcrumb-cls img {
    position : relative;
    top : 3px;
}

对的文本元素的css

.breadcrumb-cls .breadcrumb-item-cls {
    font:bold 13px arial,tahoma, helvetica, sans-serif;
}

问题是，如果有一个长序列的面包屑对，那么该行将相对于包含该行的"面板"进行换行。

相反，我想要一种设计，即项目在一行上从左到右并排，但当包含面板的水平宽度用完时，项目不会包裹。问题是，有了很多对，你可以从第二行的顶部像素，这看起来真的很糟糕。

我不想试图根据所涉及的项目来计算行的预期长度，以编程方式限制附加到根元素的内容。也就是说，我希望有一种解决方案，即无论附加多少项目，从左到右的项目都不会换行。

Andy

Answer 1

我想你想要的是：

.breadcrumb-cls {
    text-align : left;
    white-space: nowrap;
 }