Question

我试图编写左对齐的面包屑，但如果它们太长则会被推到左侧。

小可视化：

| Breadcrumb1 > Breadcrumb2        |

但是

| umb3 > Breadcrumb4 > Breadcrumb5 |

我听说过direction: rtl;（来自https://stackoverflow.com/a/218071/1274761），但这会使文字出现在第一张＆＃34;图片＆＃34;对齐。

我也尝试过使用两个div，但我也无法使用它。

我宁愿不使用基于JS的解决方案，因为面包屑的大小相当动态（文本是异步加载的）。

是否有纯HTML / CSS解决方案可以实现我想要做的事情？

修改

这就是我的尝试：

<html>
    <head>
        <style>
            .outer {
                overflow: hidden;
                position: relative;
                height: 50px;
            }

            .inner {
                white-space: nowrap;
                position: absolute;
                right: 0;
                max-width: 100%;
            }
        </style>
    </head>

    <body>
        <div class="outer">
            <div class="inner">
                asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
                asdf asdf adsf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
            </div>
        </div>
    </body>
</html>

但是它将文本与右对齐，这不是我想要的。

Answer 1

您可以使用flexbox方法执行此操作：

.container {
  display: inline-flex;      /* Make container as wide as content on larger screens */
  justify-content: flex-end; /* Right align inner ul so overflow is pushed off the left side */
  overflow: hidden;
  max-width: 50%;            /* not sure what limits your width but you need to set a max-width */
}

.breadcrumb {
  white-space: nowrap;       /* make sure crumbs are on one line */
  margin: 0;
  padding: 0;
}

.breadcrumb>li {
  display: inline-block;      /* need to be inline or inline-block for nowrap to work */
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb>li:after {
  content: '>';
  display: inline-block;
  margin: 0 0.5em;
}

.breadcrumb>li:last-child:after {
  content: '';
  display: none;
}

<div class="container">
  <ul class="breadcrumb">
    <li>crumb 1</li>
    <li>crumb 2</li>
    <li>crumb 3</li>
    <li>crumb 4</li>
    <li>crumb 5</li>
  </ul>
</div>

Example fiddle

CSS文本左对齐但左边溢出

1 个答案: