html - 为动态包含的文本设置 div 百分比宽度的纯 css 解决方案

Question

我想用 javascript 实现的目标非常简单，但如果可能，我需要一个纯 css 解决方案。

我有一个 438px X 348px 的 div。我正在这个 div 中生成一个动态列表。列表元素的高度均为 30px，并设置为 list-inline 和 float-left。我已将 li 宽度设置为 (33% - padding) 并将文本溢出设置为省略号。因此列表显示为 3 个统一列，当文本长于 li 元素的宽度时，它会被截断并在末尾显示“...”。现在我希望 li 元素根据包含的文本自动具有 33.3% 或 66.6% 或 100%。有没有纯 css 的解决方案？

这是我试过的javascript代码。

var listWidth = 432;
var oneColWidth = (33.3 * listWidth / 100) - 25;
var twoColWidth = (66.6 * listWidth / 100) - 25;
var threeColWidth = (99.9 * listWidth / 100) - 25;

$('#value_list_' + optionID + ' li').each(function() {
    var listItemWidth = $(this).find('div').width();

    if(listItemWidth < oneColWidth) {
        $(this).width(oneColWidth);
    }
    else if(listItemWidth < twoColWidth) {
        $(this).width(twoColWidth);
    }
    else {
        $(this).width(threeColWidth);
    }
});

它并没有完全按照我的意愿工作，但我需要一些类似的逻辑。这是我使用此代码取得的成果的屏幕截图。

Answer 1

我已经使用了 flex 并尝试了以下方法:您可以通过此了解 flex Flex link

这里的默认布局是 3 列，但如果有溢出，flex 会将下一个元素插入下一行...

.parent {
  width: 438px;
  height: 348px;
}

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-left: 0;
}

li {
  list-style: none;
  display: inline-block;
  min-width: calc(100% / 3);
  height: 30px;
}

<div class="parent">
  <ul>
    <li>content 1</li>
    <li>content 2 with extra characters</li>
    <li>content 3</li>
    <li>content 4</li>
    <li>content 5</li>
  </ul>
</div>