CSS文本左对齐但也向左溢出[关闭]答案

【问题标题】：CSS text align left but also overflow left [closed]CSS文本左对齐但也向左溢出[关闭]
【发布时间】：2026-01-25 02:50:01
【问题描述】：

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

小可视化：

| Breadcrumb1 > Breadcrumb2        |

然后

| umb3 > Breadcrumb4 > Breadcrumb5 |

我听说过direction: rtl;（来自https://*.com/a/218071/1274761），但这会使第一个“图片”中的文本右对齐。

我也尝试使用两个 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>

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

【问题讨论】：

到目前为止你尝试过什么？给我们看一些代码。
当您尝试使用 div 时，您是否尝试使用 flex box method 并对其应用 flex-wrap: wrap？
你为什么要它作为面包屑？当然，面包屑的重点是所有链接都是可点击的，因此您可以导航回您想要的部分
如果你想要一个单行面包屑并且屏幕是一部电话，你就必须在某个地方牺牲一些东西。 Flexbox 看起来是一个不错的解决方案。

标签： html css alignment text-alignment

【解决方案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

【讨论】：

行得通！谢谢。
对于.breadcrumb>li:last-child:after，您可以通过在上一个块中的li 和:after 之间添加:not(:last-child) 来替换它