I'm struggling to create breadcrumbs that are aligned to the left but adjust if they become too long.
Here's a small example:
| Breadcrumb1 > Breadcrumb2 |
However,
| umb3 > Breadcrumb4 > Breadcrumb5 |
I came across direction: rtl; (source: ), but it right aligns the text in the first scenario.
I also attempted to use two divs, but I couldn't make it work either.
I prefer avoiding a JavaScript solution since the breadcrumbs vary in size (text loads asynchronously).
Is there a pure HTML/CSS approach to achieve what I need?
Edit
This is my attempt:
<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 asdf adsf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
</div>
</div>
</body>
</html>
However, it right aligns the text instead of left aligning which is not the desired outcome.