CSS text align left but also overflow left

Question

I'm trying to write breadcrumbs that are left-aligned, but get pushed out on the left if they are too long.

Small visualization:

| Breadcrumb1 > Breadcrumb2        |

But then

| umb3 > Breadcrumb4 > Breadcrumb5 |

I have heard about direction: rtl; (from https://stackoverflow.com/a/218071/1274761), but this makes the text in the first "picture" right aligned.

I also tried to work with two divs, but I couldn't get it to work either.

I would rather not use a JS based solution, because the breadcrumbs are rather dynamic in size (texts get loaded asynchronously).

Is there a pure HTML/CSS solution that would achieve what I'm trying to do?

Edit

This is what I have tried:

<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>

But it aligns the text to the right, which is not what I want.

When you tried using divs did you try using the [flex box method](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and applying flex-wrap: wrap to it? — connoraworden, Apr 26 '18 at 12:11
Why would you want that for a breadcrumb? Surely the point of a breadcrumb is that all links are clickable so you can navigate back to the section you want — Pete, Apr 26 '18 at 12:20
If you want a single-line breadcrumb and and the screen is a phone, you'll have to sacrifice something somewhere. Flexbox looks like a decent solution. — arnt, Apr 26 '18 at 12:31

score 2 · Accepted Answer · answered Apr 26 '18 at 12:32

You can use a flexbox approach to do this:

.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

for the `.breadcrumb>li:last-child:after` you can replace it by adding `:not(:last-child)` between `li` and `:after` in the previous block — OzzyTheGiant, May 21 '18 at 21:31

CSS text align left but also overflow left

1 Answers1