CSS 文本左对齐但也向左溢出

Question

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

小型可视化：

| Breadcrumb1 > Breadcrumb2        |

但是后来

| umb3 > Breadcrumb4 > Breadcrumb5 |

我听说过 direction: rtl;（来自），但这会使第一个 "picture" 中的文本右对齐。

我也尝试过使用两个 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 文本左对齐但也向左溢出

CSS text align left but also overflow left

html

css

alignment

text-alignment