I have a div with a fixed width which contains 'tags' like the stackoverflow-tags.

Now, what's disturbing me, is that the Hallo Tag is in the last line, but it would fit in the first line. Like this:

The order of the elements is irrelevant. So, reordering would be an option.

Question: How can i achieve this? I'm currently using a <ul><li></li></ul> construct.

The nicest way would be a CSS-Way, but i guess it's up to JS to solve this problem. Any ideas would be appreciated :)

UPDATE JSFiddle: /

I have a div with a fixed width which contains 'tags' like the stackoverflow-tags.

Now, what's disturbing me, is that the Hallo Tag is in the last line, but it would fit in the first line. Like this:

The order of the elements is irrelevant. So, reordering would be an option.

Question: How can i achieve this? I'm currently using a <ul><li></li></ul> construct.

The nicest way would be a CSS-Way, but i guess it's up to JS to solve this problem. Any ideas would be appreciated :)

UPDATE JSFiddle: http://jsfiddle/CLj2q/

• javascript
• jquery
• html
• css

• If the html is created server-side, it's probably best to order your tags server-side too. Otherwise, where do the data e from? – Mr Lister Commented May 23, 2013 at 10:31
• CSS can not reshuffle your document automatically, so you're going to be writing Javascript for this. Nasty job though for a lot of reasons. I'll add the jQuery tag to your post since it bees relevant, judging from the fiddle. – Niels Keurentjes Commented May 23, 2013 at 10:54
• One possibility is to use server side code to count the number of characters in each string and order them that way (though obviously this would work far better with a fixed width font). – user1945782 Commented May 23, 2013 at 11:10
• 1 @steve: just as an update, I add some code to add tags dynamically just for fun: jsfiddle/CLj2q/13 – frenchie Commented May 23, 2013 at 12:31

3 Answers 3

Got it: The jsFiddle is here

$(function() {
    $('.as-close').click(function(e) { $(this).parent().remove(); });
    DoTagSort();
});

function DoTagSort() {

    var TheItems = [], TheHTML = '';
    var TheLinks = $('.as-selections').find('li').each(function () {
        TheItems.push($(this).text().slice(1));        
    });

    TheItems.sort(function(a, b) { return b.length - a.length; });

    var TheTag = '<li class="as-selection-item"><a class="as-close">×</a>';

    while(TheItems.length > 1) {

        TheHTML = TheHTML + TheTag + TheItems[0] + '</li>';
        TheHTML = TheHTML + TheTag + TheItems[TheItems.length - 1] + '</li>';

        TheItems.splice(0, 1);
        TheItems.splice(TheItems.length - 1, 1);
    }

    if (TheItems.length) {
        TheHTML = TheHTML + TheTag + TheItems[0] + '</li>';
    }

    $('.as-selections').html(TheHTML);
}

Assuming that the container for the tags is a set-width, and the tags themselves aren't (ie: they inherit their width from their contents, rather than us being able to give them a set-width) there's not a huge amount that you can do from the CSS perspective without breaking and re-ordering the flow of the markup.

If the markup is being generated server-side I'm sure you could calculate widths and re-order prior to pushing the markup into the view. If not, you're a bit stuck without using JavaScript.

Given that the order requirement appears to be purely appearance-based (ie: not functional), there's no harm in enhancing the standard float view that you've displayed in your screenshot with JavaScript. This means that JS-enabled visitors will get an 'enhanced' view (with the elements ordered nicely), whilst non-JS users would still have a fully-functional tag cloud, albeit in a slightly less-organised fashion.

jQuery Masonry or Isotope would probably do would do exactly what you need.

This is off the shelve solution. And a bit of a cheat with Masonry (notice the columnWidth: 1).

   $('.as-selections').masonry({
      itemSelector: '.as-selection-item'
      , columnWidth: 1 });

http://jsfiddle/D5ud7/1/

I guess you could find more appropriate library for this or better html form for masonry to crunch.