HTML

<p>For a dynamic navigation list that shows a long link text when there is only one link in <code>nav</code> element.</p> <h2>Single Link</h2> <nav> <a> <span class="long">More information</span> <span>More</span> </a> </nav> <h2>Multiple Links</h2> <nav> <a> <span class="long">Setup and install</span> <span>Setup</span> </a> <a> <span class="long">Accounts and billing</span> <span>Accounts</span> </a> <a> <span class="long">More information</span> <span>More</span> </a> </nav>

CSS

nav { display: flex; flex-wrap: wrap; } nav a { display: block; margin-right: 2rem; } nav a:last-child { margin-right: auto; } nav a span.long { display: none; } nav a span:not(.long) { display: block; } nav a:only-child span.long { display: block; } nav a:only-child span:not(.long) { display: none; }

JavaScript