Show maximum items that fit

Question

Good day!

There is a container with a width of 100%. I would like to show in this container as many links as fit there without transferring to another line. Because the width of the container is unknown, I want to place there all the links that I have, but to hide those that do not fit completely into the container. That is, to avoid a situation where links will be cut off. To avoid a situation like:

Similar articles - how to cook cabbage, how to cook zucchini, how to cook beef

If the link to the beef does not fit, then do not show it, and not cut.

Is it possible to somehow implement it on css?

thank

as an option - the text is cut off and dots are added to the end of the line - jsfiddle.net/soledar10/ynsdpv1z

Answer 1 · 2016-06-10T10:27:58

content = document.querySelector('.content'); button = document.querySelectorAll('button'); button[0].onclick = function() {content.style = 'width: 430px';}; button[1].onclick = function() {content.style = 'width: 600px';};

 .content { width: 600px; background: #F0F4F8; padding: 4px; border-radius: 2px; height: 16px; overflow: hidden; } span a { text-decoration: none; color: #000; } span a:hover { text-decoration: underline; color: #61aceb; }

 <div class='content'> <span>Похожие статьи: </span> <span><a href='#'>как готовить капусту</a>,</span> <span><a href='#'>как готовить кабачки</a>,</span> <span><a href='#'>как готовить говядину</a></span> </div> <button>430 px</button> <button>600 px</button>

Or by the example provided in the comment.

The key role is played by overflow: hidden and height: 16px in the main block and the specified display: inline-block parameter for the link

 div { overflow: hidden; background: #F0F4F8; padding: 4px; height: 16px; border-radius: 3px; margin-top: 64px; } div a { margin-left: 6px; text-decoration: none; color: #000; display: inline-block; } div a:hover { text-decoration: underline; color: #2c86d2; }

 <div> <a href="#">как готовить капусту</a> <a href="#">как готовить кабачки</a> <a href="#">как готовить какахи</a> <a href="#">как готовить блины</a> <a href="#">как готовить плов</a> <a href="#">как готовить сырники</a> <a href="#">как готовить осьминога</a> <a href="#">как готовить Grundy</a> <a href="#">как готовить кексики</a> </div>

@anacol, if you remove hidden then you will see where the text goes, which did not fit.
@anacol, if div a has a font-size: 24px , then the block height will have to be adjusted to 24px.

Show maximum items that fit

1 answer 1

More articles: