Рендеринг <ul>элементов снизу вверх

Question

У меня есть ul с переменным количеством элементов.Когда li слишком широки, чтобы список мог обрабатывать их в одной строке, он разбивает строку и начинает отображать li в нижней строке, поэтому я получаю что-то вроде этого:

x - обозначает элемент списка

|- обозначает границы списка или что-то, что ограничивает ширину списка

|xxxxxxxxx|<- elements reached the end of container and remaining elements will be rendered below
|xxxx     |

Мне нужно отрисовать элементы снизу вверх, чтобы я мог получить:

|xxxx     |
|xxxxxxxxx|<- elements reached the end of container and remaining elements will be rendered above

Возможно ли это?

Вот пример кода

<ul>
  <li>Some content</li>
  <li>Other content</li>
  <li>ContentContent</li>
  <li>Zawartość Contentu</li>
</ul>

В настоящее время он не содержит CSS.Я могу добавить все, что вы порекомендуете, чтобы сделать это в порядке снизу вверх.Нечто подобное float:bottom, которого, к сожалению, не существует.

Answer 1

ul, ul li {
-webkit-transform: scaleY(-1);
   -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
     -o-transform: scaleY(-1);
        transform: scaleY(-1);

}
ul {
    width: 350px;
}
 li {
    display: inline-block;
    width: 70px;
    zoom: 1;         
    *display: inline;
}

источник: снизу вверх

Answer 2

Направление текста снизу вверх не поддерживается в css (http://dev.w3.org/csswg/css3-writing-modes/#writing-mode1),, поэтому любое решение потребует javascript или серверных манипуляций.

Вот одно решение, использующее jQuery для ручного разрезания длинных элементов на более мелкиестроки с тегами <br /> в начале.

Демонстрация: http://jsfiddle.net/FGk5R/2/

Код:

var LIST_WIDTH = 25; // Manually adjust this to change the width of your list to fit your container element
$('ul li').each(function(){
    var listitem = $(this).html();
    $(this).html(bottomToTop(listitem));

    function bottomToTop(item)
    {
       var length = item.length;
       var newhtml = '';

        if (length <= LIST_WIDTH)
        {
            return item;
        }
       while (length > 0)
       {          
            if (length <= LIST_WIDTH)
            {
                var newhtml = item.slice(-LIST_WIDTH) + newhtml;
            }
            else
            {
                var newhtml = '<br />' + item.slice(-LIST_WIDTH) + newhtml;
            }

            item = item.substr(0, (length - LIST_WIDTH));
            length = item.length;
        }
        return newhtml;
    };  
});

Answer 3

Вы должны будете использовать JavaScript.Если линия длиннее вашего максимума, вы разделяете ее таким образом, чтобы максимально увеличить нижнюю линию, оставаясь ниже своего максимума;Хитрость, хотя - я предлагаю вам проверить, действительно ли усилия стоит выигрыша.