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

Question

我要使用javascript来实现的目的很简单，但是如果可能的话，我需要一个纯CSS解决方案。

我有一个div 438px X 348px。我正在此div中生成一个动态列表。每个list元素的高度均为30px，并设置为list-inline和float-left。我已将li宽度设置为（33％-填充），文本溢出设置为省略号。因此，该列表显示为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 link

了解有关flex的信息

这里的默认布局是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>