Flexbox父扩展宽度，如果孩子包含一个真长字 [英] Flexbox parent to extend width if the child contains a really long word

问题描述

我不知道有没有人可以帮我解决这个问题，我似乎找不到任何人想要用flexbox做这个。

I wonder if anyone can help me with this issue, I can't seem to find anyone else who's wanting to do this with flexbox!

一个基本的Flexbox场景，其中几个元素（li）出现在flexbox容器（ul）中。

I've set up a basic Flexbox scenario where several elements (li) appear in a flexbox container (ul).

我也设置了它，在包装之前适合一行3（通过设置ul的宽度为900px和基于弹性的260px为li的）。

And I've also set it so that the maximum amount li's that will fit in a row before wrapping is 3 (done by setting a ul width of 900px and a flex-basis of 260px for the li's).

这一切都很好，但是我的问题出现在这样的事实，即文本将最终来自数据库。有时在德语（这么长的话）。

This all works great, but the problem for me arises in the fact that the text will ultimatley be coming from a database. Sometimes in German (so long words). I've no idea which li's will have long words or not so I need to set them all the same.

基本上我的问题是...

Basically my questions is...

为什么当'li'比正常文本长的时候，li不扩展到更宽？所以在下面的例子中，我想要第三个li（标题文本3）扩展以显示其所有的文本，它可能需要换行到下一行来显示这个！因此，它需要切换到2行2，而不是一行3和一行1.

Why when a 'li' has longer than normal text inside it, does the li not extend to be wider? So in the example below I would like the 3rd li (Header text 3) to extend to show all its text and it would probably need to wrap onto the next row to show this! So it would need to switch to 2 rows of 2, rather than a row of 3 and a row of 1.

我希望所有的都有意义，任何帮助将是大。 ：）

I hope that all makes sense, any help would be great. :)

下面的代码和代码。

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;
}

推荐答案

请注意溢出的文本宽度。你说任何帮助将是伟大的。如果你确定有一点JavaScript（jQuery），那么这个问题的你可以解决。

Flexbox doesn't seem to be aware of the overflowing text width. You said any help would be great. If you are ok with a bit of JavaScript (jQuery), then this problem of yours can be solved.

我们将开始添加一点CSS：

We'll start by adding a bit of CSS:

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

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

Then we'll use a bit of jQuery to find the overflowing long words and check if they are longer than the parent containers li.WidgetNew.

如果带有长文本的内部div比父容器长，然后将 .twobytwo 添加到它的父 .WidgetNew 元素

If the inner div with the long text is longer than the parent container then add the class .twobytwo to it's parent .WidgetNew element

添加JavaScript：

Add the 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;
};

您的代码已更新

希望这有帮助。

这篇关于Flexbox父扩展宽度，如果孩子包含一个真长字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！