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

2023年11月11日 544次阅读

我想用
javascript实现的目标很简单,但如果可能的话我需要一个纯粹的CSS解决方案.

我有一个div 438px X 348px.我在这个div中生成一个动态列表.列表元素的高度各为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);
    }
});

它不能完全按照我的意愿工作,但我需要一些类似的逻辑.这是我使用此代码实现的截图.

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

最佳答案 我使用了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>
点赞