Как сохранить изгиб элемента из-за его текста?

У меня есть следующий макет для списка. Каждый элемент списка представлен двумя столбцами. Второй столбец должен занимать все свободное пространство, но он должен быть привязан вправо с минимальным размером, если первый столбец занимает слишком много места. В первом столбце следует указать многоточие.

Проблема в последнем случае. Когда первый столбец состоит из слишком большого количества текста, вместо того, чтобы показывать многоточие, он растягивается из flexbox, вызывая появление горизонтальной полосы прокрутки, а второй столбец не привязан вправо.

Я хотел бы, чтобы это выглядело так (макет):

Expected rendering

Как я могу это достичь?

Это образец скрипта.

.container {
    display: -webkit-flex;
}

div {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.container > div:last-child {
    -webkit-flex: 1;
    background: red;
}
<!-- a small first column; the second column is taking up space as expected -->
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<!-- a large first column; the first column is overflowing out of the flexbox container -->
<div class="container">
    <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
    foo barfoo barfoo barfoo barfoo barfoo barfoo bar
    foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>

Ответы

Ответ 1

UPDATE

Добавление кода, который работает:

.container {
    display: -webkit-flex; 
}

.container>div:first-child{
    white-space:nowrap;
   -webkit-order:1;
   -webkit-flex: 0 1 auto; /*important*/
    text-overflow: ellipsis;
    overflow:hidden;
    min-width:0; /* new algorithm overrides the width calculation */
}

.container > div:last-child {
    -webkit-flex: 1;
    -webkit-order:2;
    background: red;
    -webkit-flex:1 0 auto; /*important*/
}
.container > div:first-child:hover{
    white-space:normal;
}
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div><div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

Ответ 2

Вы можете установить предпочтительный размер дочернего элемента, установив третье значение свойства flex в auto, например:

flex: 1 0 auto;

Это сокращение для установки свойства flex-basis .

( Пример)

Как отмечалось в комментариях, это, похоже, не работает в Chrome Canary, хотя я не уверен, почему.

Ответ 3

Обновление: это не ответ. Это решает разные проблемы, и это был шаг в поиске реального ответа. Поэтому я сохраняю это по историческим причинам. Пожалуйста, не голосуйте на нем.

Я считаю, что это ваш ответ: http://jsfiddle.net/iamanubhavsaini/zWtBu/2/

enter image description here

отсылайте W3C

для первого элемента

-webkit-flex: 0 1 auto; /* important to note */

и для второго элемента

-webkit-flex:1 0 auto; /* important to note */

- это свойства и значения, которые делают трюк.

Подробнее на http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex

и вот как вы меняете порядок: http://jsfiddle.net/iamanubhavsaini/zWtBu/3/

и этот с предопределенной минимальной шириной красно-фоновой-thingy: http://jsfiddle.net/iamanubhavsaini/zWtBu/1/

Ответ 4

Обновление: это не ответ. Это решает разные проблемы, и это был шаг в поиске реального ответа. Поэтому я сохраняю это по историческим причинам. Пожалуйста, не голосуйте на нем.

EDIT 2: Этот ответ не решает проблему. Существует тонкая разница между целью вопроса и ответом.

Прежде всего, text-overflow:ellipsis работает с overflow:hidden. Фактически, он работает с чем-то другим, кроме overflow:visible. Ссылка

Затем выполните итерацию через:

http://jsfiddle.net/iamanubhavsaini/QCLjt/8/

Здесь я добавил свойства overflow и max-width. max-width:60%; и overflow:hidden - это то, что заставляет вещи появляться так, как вы планировали, поскольку hidden останавливает отображение текста, а 60% фактически создает поле с определенным размером в случае слишком большого количества текстовых данных.

Затем, если вы действительно заинтересованы в модели гибкой коробки здесь, как все это происходит через -webkit-order.

http://jsfiddle.net/iamanubhavsaini/QCLjt/9/

- код -

<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>

относится к CSS

.container {
    display: -webkit-flex;
}

div {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
}
.container>div:first-child{
   -webkit-order:1;
        -webkit-flex: 1;
}
.container > div:last-child {
    -webkit-flex: 1;
    -webkit-order:2;
    background: red;
}

- Ширина нет, и все же она работает. И это то, что я вижу.

enter image description here

- после комментария

-webkit-order: N; - это то, что мы будем использовать через 2 года вместо float:---; и еще много хакеров (если W3C останется на этом курсе, а также если каждый поставщик браузера следовать)

здесь, порядок равен 1 для левого div и 2 для правого div. таким образом, они являются Left-Right.

http://jsfiddle.net/iamanubhavsaini/QCLjt/10/

то же самое здесь, но только если вы ищете Right-Left, просто измените порядок вещей как div>first-child { -webkit-order:2; } div>last-child{-webkit-order:1;}

ПРИМЕЧАНИЕ: этот способ -webkit-flex делать вещи явно делает этот код бесполезным для других движков. Для повторного использования кода в нескольких браузерах следует использовать float ing.

ниже приведены некоторые примеры JS; что не отвечает на вопрос -после комментария

Я думаю, что это отвечает на ваш вопрос и многое другое, есть другие способы и разные решения, но не совсем решение этого вопроса. http://jsfiddle.net/iamanubhavsaini/vtaY8/1/ http://jsfiddle.net/iamanubhavsaini/9z3Qr/3/ http://jsfiddle.net/iamanubhavsaini/33v8g/4/ http://jsfiddle.net/iamanubhavsaini/33v8g/1/

Ответ 5

для mozilla вы должны добавить "min-width: 1px;"

Ответ 6

Этот пример действительно помог мне: http://jsfiddle.net/laukstein/LLNsV/

container {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    padding: 0;
    white-space: nowrap;
}

.container>div {
    overflow: hidden;
    display: inline-block;
    -webkit-flex: 1;
    min-width: 0;
    text-overflow: ellipsis;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

Ответ 7

Вы должны сделать положение контейнера: относительное и дочернее положение: абсолютное.