从下到上渲染 <ul> 元素答案

【问题标题】：Rendering <ul> elements bottom to top从下到上渲染 <ul> 元素
【发布时间】：2011-12-29 11:26:29
【问题描述】：

我有一个 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 之类的东西很遗憾不存在。

【问题讨论】：

我想改变自动换行的方式是不可能的。但也许你可以手动添加一些<br />？
那我需要知道每个元素的宽度来决定什么时候换行：/.
如果您可以使用 javascript，您可以确定必要的宽度。

标签： html css render html-lists direction

【解决方案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;
}

来源：Bottom to top <ul> element arrangement

【讨论】：

【解决方案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;
    };  
});

【讨论】：

【解决方案3】：

您需要使用 javascript。如果一条线比你的最大值长，你将它分割成尽可能长的下线，同时保持在你的最大值以下；不过很棘手 - 我建议您检查一下付出的努力是否真的值得。

【讨论】：

我是从这个想法开始的，但不，这不值得努力：/ 所以我开始寻找一些 CSS/HTML 解决方案，据我所知，它不可能在底部呈现页面元素-最高订单。