1

I've got some menu items that will be translated, and in some languages the text will have to wrap to accommodate the longer text.

The menu is a flexbox row of UL>LI elements with A tags in them.

<ul>
    <li>
        <a href="#">
            Ce que nous faisons
        </a>
    </li>
    <li>
        <a href="#">
            Logiciels que nous supportons
        </a>
    </li>
    <li>
        <a href="#">
            les industries
        </a>
    </li>
        <li>
        <a href="#">
            Entreprise
        </a>
    </li>
</ul>

When text is not wrapping, each menu item has an equal space between them and the menu feels balanced and readable. However once the text within an A tag starts to wrap, some extra whitespace seems to be preserved by the browser, creating large and uneven gaps between menu elements that does not look correct.

Not wrapping yet, looks good

Not enough width so starting to wrap, spacing is all uneven now

Actual width of the text for the first wrapping element

Parent A tag of that text still preserves this extra whitespace

This would be my desired result:

Desired result

I created this result by manually setting widths in pixels for the first two items. Not practical for my use case but it illustrates what I am hoping to achieve dynamically. When items wrap, there is no extra whitespace preserved in their containers, and the space between menu items is even.

The only CSS I've been able to find that effects this extra whitespace is adding width: min-content; to my A tags. However this goes too far in the other direction, breaking at every space and producing something like this:

width: min-content example

Some have suggested using a combination of width: min-content; + non-breaking spaces to achieve the desired result. However there are too many languages, menu items, and potential responsive break points to make this a practical solution.

Matt Keys
  • 429
  • 4
  • 11
  • 1
    Yes thank you for sharing that it does explain the situation I find myself in very well. I feel like the browsers should be able to handle this better, but I guess I'll be exploring either non-breaking spaces with width: min-content, or I'll need some JS solution. – Matt Keys Feb 20 '23 at 22:33

1 Answers1

0

With a simple flexbox CSS on your structure, does this helps on what you're going to achieve ?

ul {
  display: flex;
  list-style: none;
  padding: 10px;
  border: 1px solid black;
  justify-content: space-between;
}

li {
  border: 1px dashed black;
  padding: 10px;
}
<ul>
    <li>
        <a href="#">
            Ce que nous faisons
        </a>
    </li>
    <li>
        <a href="#">
            Logiciels que nous supportons
        </a>
    </li>
    <li>
        <a href="#">
            les industries
        </a>
    </li>
        <li>
        <a href="#">
            Entreprise
        </a>
    </li>
</ul>
Zeikman
  • 669
  • 5
  • 10
  • I'm afraid not. in my case I am looking for the space between the elements to remain fixed and equal at all viewport widths. The demo from your code is inconsistent in those widths. From the comments on my question it seems what I am asking for cannot be accomplished in CSS. – Matt Keys Feb 21 '23 at 21:56