Flexbox parent для расширения ширины, если дочерний элемент содержит очень длинное слово

Интересно, может ли кто-нибудь помочь мне в этом вопросе, я не могу найти кого-либо еще, кто хочет сделать это с помощью flexbox!

Я установил базовый сценарий Flexbox, в котором несколько элементов (li) отображаются в контейнере Flexbox (ul).

И я также установил его так, чтобы максимальное количество li, которое будет вписываться в строку перед оберткой, равно 3 (сделано путем установки ширины ul 900px и flex-основы 260px для li).

Все это прекрасно работает, но проблема для меня возникает в том, что текст будет ультиматум из базы данных. Иногда на немецком языке (так долго слова). Я понятия не имею, у кого будет длинные слова или нет, поэтому мне нужно установить их одинаково.

В основном мои вопросы...

Почему, когда "li" имеет более длинный, чем обычный текст внутри, ли li не расширяется, чтобы быть более широким? Поэтому в приведенном ниже примере я хотел бы, чтобы 3-й li (заголовок текста 3) расширялся, чтобы показать весь его текст, и, вероятно, это должно было бы переместиться в следующую строку, чтобы показать это! Поэтому ему нужно будет переключиться на 2 строки по 2, а не на строку из 3 и строку 1.

Я надеюсь, что все имеет смысл, любая помощь будет большой.:)

Код и кодепень ниже.

Codepen Link

HTML...

<div>
 <ul>
 <li>
 <h1>Header text 1</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium nulla eget libero congue.</p>
</li>
<li>
 <h1>Header text 2</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium nulla eget libero congue.</p>
</li>
<li>
 <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>
 <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;
}
1 ответ

Flexbox, похоже, не знает о переполненной ширине текста. Вы сказали, что любая помощь будет отличной. Если у вас все в порядке с JavaScript (jQuery), тогда эта проблема может быть решена.

Начнем с добавления CSS:

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

Затем мы будем использовать немного jQuery для поиска переполненных длинных слов и проверки, если они длиннее родительских контейнеров li.WidgetNew.

Если внутренний div с длинным текстом длиннее родительского контейнера, тогда добавьте класс .twobytwo к нему parent .WidgetNew element

Добавьте 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;
};

Обновлен код кода

Надеюсь, что это поможет.

licensed under cc by-sa 3.0 with attribution.