从底部向上渲染<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，但不幸的是它不存在。

- S3Mi

---

我认为自动换行的方式是无法更改的。但是也许你可以手动添加一些<br />？ - Armin

然后我需要知道每个元素的宽度，以确定何时换行。/ - S3Mi

如果您可以使用JavaScript，您可以确定所需的宽度。 - Armin

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;
}

来源: 从下到上的 <ul> 元素排列

- bancer

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;
    };  
});

- Chris Fletcher

Answer 3

你需要使用JavaScript。 如果一行超过了你的最大长度，你需要将它分割成两行，让下面的行尽可能长，同时保持在你的最大长度以下；这有点棘手 - 我建议你检查一下是否真的值得这样做。

- kontur

---

我最初有这个想法，但是不值得花费那么多的精力。于是我开始寻找一些CSS/HTML解决方案，但据我所读，似乎不可能按照从底部到顶部的顺序呈现页面元素。 - S3Mi