Question

我有一个<div> - 宽度为185px的元素（高度无关紧要），我有几个基于文本的标签，最大长度为20个字符。

当我加载页面时，标签显示在div中（数据来自数据库），但是按字母顺序排序，这导致我可以在行尾有大空格的问题。在那个空间里，一个较短的标签可以很好地适应。

我无法想出一种按长度排序的订单技术，因此在包装到下一行之前最好填充该行。此处不再需要字母顺序。

除了JS和HTML之外，如果它很重要，我可以使用LESS和PHP。

PHTML：

<div class="tag-list">
    <?php foreach ($this->tags as $tag): ?>
        <div class="tag-marker"><?php echo $tag->name; ?></div>
    <?php endforeach; ?>
</div>

数据来自PHP作为标记数组。

[
    {"name":"important","color":"#cccccc"},
    {"name":"normal","color":"#cccccc"},
    {"name":"ignore","color":"#cccccc"},
    ...
]

LESS：

.tag-list {
    width: 185px;
    overflow: auto;
}

.tag-marker {
    //some styling
}

对标签列表进行排序，使其最符合可用宽度

0 个答案: