html – Flexbox父级扩展宽度,如果子级包含一个非常长的单词

2023年9月8日 238次阅读

我想知道是否有人可以帮助我解决这个问题,我似乎无法找到任何想用Flexbox做这件事的人！

我已经设置了一个基本的Flexbox场景,其中几个元素(li)出现在flexbox容器(ul)中.

而且我还设置了它,以便在包装之前排成一行的最大量li是3(通过设置ul宽度为900px并且灵活性为260px的li来完成).

这一切都很有效,但对我来说问题在于,文本将最终来自数据库.有时用德语(这么久的话).我不知道哪个李会说长话还是不长,所以我需要设置它们.

基本上我的问题是……

为什么当’li’比其中的正常文本更长时,li不会扩展到更宽？因此,在下面的示例中,我希望第3个li(页眉文本3)扩展以显示其所有文本,并且它可能需要包装到下一行以显示此内容！所以它需要切换到2行2,而不是3行和1行.

我希望一切都有道理,任何帮助都会很棒. 🙂

Code和Codepen如下.

Codepen Link

HTML …

  <div>
  <ul class="FlexWidgetsNew">
  <li class="WidgetNew">
  <h1>Header text 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium nulla eget libero congue.</p>
</li>


<li class="WidgetNew">
  <h1>Header text 2</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium nulla eget libero congue.</p>
</li>

<li class="WidgetNew">
  <h1>Header text 3</h1>
  <p>This text has a longer word than the rest xxxxxxxxxxxxxxxxxxxxxxxxxxxx12234567890 and so part of it is disappearing out of the li.</p>
</li>

<li class="WidgetNew">
  <h1>Header text 4</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</li>
</ul>
</div>

CSS …

  .FlexWidgetsNew {
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  overflow: hidden;
  width:900px;
  background-color: #f00;
  }

.WidgetNew {
-webkit-flex: 1 1 300px;
-ms-flex: 1 1 300px;
flex: 1 1 300px;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
padding: 10px 2% 30px 2%;
overflow: hidden;
box-sizing: border-box;
cursor: pointer;
border:1px solid #000;
}

h1 {
width: 100%;
word-wrap: normal;
color: #fff;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
}

p {
width: 100%;
word-wrap: normal;
color: #000;
font-family: Arial, Helvetica, sans-serif;
}

最佳答案 Flexbox似乎并不知道溢出的文本宽度.你说任何帮助都会很棒.如果你对一些JavaScript(jQuery)没问题,那么你的这个问题就可以解决了.

我们首先添加一些CSS：

.WidgetNew.twobytwo {
  flex: 1 1 450px;
}

然后我们将使用一些jQuery来查找溢出的长字,并检查它们是否比父容器li.WidgetNew更长.

如果带有长文本的内部div比父容器长,那么将类.twobytwo添加到它的父.WidgetNew元素

添加JavaScript：

var el = $('.WidgetNew > p');
$(el).each(function(index, value) {
  var tempEl = textWidth($(this));
  var tempElP = $(this).parent().width();
  if (tempEl > tempElP) {
    $(this).parent().addClass('twobytwo');
    $(this).parent().siblings().addClass('twobytwo');
  }
});

function textWidth(el){
    var text = $(el).html();
    $(el).html('<span>'+text+'</span>');
    var width = $(el).find('span:first').width();
    $(el).html(text);
    return width;
};

Your codepen updated

希望这可以帮助.

点赞