CSS, два гибких поля переменной ширины, каждое занимает 50%, если долго

Question

CSS, два гибких поля переменной ширины, каждое занимает 50%, если долго

0

У меня есть несколько строк адреса электронной почты и имени. Я хотел бы показать как можно больше контента. Итак, если у меня короткое имя, укажите больше адреса электронной почты, и если у меня будет короткое письмо, укажите другое имя. Если имя и адрес электронной почты длинны, я бы хотел, чтобы они занимали равное количество места. И для любого длинного, усеченного элемента я бы хотел, чтобы они закончили с многоточием.

Есть ли способ сохранить эти требования, не прибегая к Javascript? Я бы предпочел не использовать макеты flexbox (недостаточно поддержки браузера), но я был бы открыт для этого. Кроме того, все это одна строка; без упаковки.

------------- -------------------------------------
| This is a long name...| This is a long email... |
------------- -------------------------------------

|<------------------100% width ------------------>|


<div class='result'>
  <div class='textHolder'>
   <h3>Name</h3>
   <h4>Email</h4>
  </div>
</div>

Newtang 01 окт. 2013, в 21:09

Источник

1

Элементы H3 и h4 кажутся здесь семантически неуместными. Заголовки должны быть для заголовков разделов контента. Может быть, таблица или список определений будет более уместным?
cimmanon 01 окт. 2013, в 18:22
0

Это хороший момент, @cimmanon, спасибо. Я упустил это.
Newtang 01 окт. 2013, в 18:43
0

Не вижу здесь хорошего решения CSS с требованием многоточия (таблица cssdeck.com/labs/gkelmysp vs flexbox cssdeck.com/labs/izktkdre ).
cimmanon 01 окт. 2013, в 18:45
0

Добавлено дополнительное требование быть одной строкой.
Newtang 01 окт. 2013, в 19:16

Показать ещё 2 комментария

Теги:

html

css

layout

2 ответа

Ещё вопросы

Элементы H3 и h4 кажутся здесь семантически неуместными. Заголовки должны быть для заголовков разделов контента. Может быть, таблица или список определений будет более уместным?
Это хороший момент, @cimmanon, спасибо. Я упустил это.
Не вижу здесь хорошего решения CSS с требованием многоточия (таблица cssdeck.com/labs/gkelmysp vs flexbox cssdeck.com/labs/izktkdre ).
Добавлено дополнительное требование быть одной строкой.

jackJoe · Answer 1 · 2013-10-01T17-13-00.000Z

Без javascript единственным решением, которое, как я думаю, будет работать, является max-width 50% для каждого и text-overflow с помощью многоточия (...) при переполнении текста...

Единственная проблема заключается в том, что, например, имя очень маленькое, если письмо очень велико, оно будет занимать только 50% от полной ширины.

Я сделал эту скрипку: http://jsfiddle.net/N36tY/

(также я согласен с cimmanon, используйте другие теги)

Пример HTML:

<div class='result'>
    <div class='textHolder'>
         <h3>Name</h3>

         <h4>Email</h4>

        <div class="clear"></div>
         <h3>Name and more text, etc and even more to make it overflow</h3>

         <h4>Email</h4>

        <div class="clear"></div>
         <h3>Name and more text, etc and even more to make it overflow</h3>

         <h4>Email and a lot of text and more and even more to make it overflow</h4>

        <div class="clear"></div>
         <h3>Small name</h3>

         <h4>Email and a lot of text and more and even more to make it overflow</h4>

    </div>
</div>

CSS:

.textHolder {
    width: 100%;
}
h3 {
    background: blue;
    color: #FFF;
}
h4 {
    background: green;
    color: #FFF;
}
h3, h4 {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: normal;
    display: block;
    float: left;
    min-width: 10px;
    max-width: 50%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.clear {
    clear: both;
}

Gene Parcellano · Answer 2 · 2013-10-01T15-39-00.000Z

@Newtang Я обновил JSFiddle до ваших требований. Когда вы расширяете и сокращаете страницу, если ширина страницы слишком мала, появятся эллипсы.

Здесь ссылка http://jsfiddle.net/6gFN9/1/

.textHolder {
    width: 100%;
}
h3, h4 {
    float: left;
    max-width: 50%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}