Блог

Главная - Вопросы по программированию - DIV float: справа без переноса текста

DIV float: справа без переноса текста

#html #css

#HTML #css

Вопрос:

Я пытаюсь создать псевдотаблицу из трех столбцов в CSS / HTML:

Столбцы:

  • Длинное текстовое поле, выравнивание текста по левому краю
  • Переменное текстовое поле, выравнивание текста: по правому краю
  • Исправлено текстовое поле, выравнивание текста по правому краю

введите описание изображения здесь

При коротком тексте все отображается правильно.. но если первый или второй столбец становятся слишком большими, текст переносится:

введите описание изображения здесь

Я хочу, чтобы первая строка была заполнена эллипсом, чтобы она выглядела следующим образом:

введите описание изображения здесь

Но, похоже, я не могу правильно использовать CSS. Вот что у меня есть на данный момент:

HTML:

 <div class="row">
    <div class="filename">First column with some short text</div>
    <div class="download">Download</div>
    <div class="attributes">[Some attributes]</div>
</div>

<div class="row">
    <div class="filename">First column with some more short text</div>
    <div class="download">Download</div>
    <div class="attributes">[Some attributes]</div>
</div>

<div class="row">
    <div class="filename">Last row with longer text should be clipped but is not being</div>
    <div class="download">Download</div>
    <div class="attributes">[Attributes, Are, Different]</div>
</div>

CSS:

 div
{
    font-family: arial;
}

.row
{
    width: 600px;
    background-color: red;
    margin-bottom: 10px;
    white-space: nowrap;
    padding: 5px;
}

.row div
{
    display: inline-block;
}

.filename
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}

.attributes
{
    float: right;
}

.download
{
    float: right;
}

.attributes,
.download
{
    padding-left: 5px;
}

JSFiddle:

http://jsfiddle.net/nLACS/8/

Кто-нибудь может предложить наилучший способ сделать переполнение первого столбца, чтобы вторые два столбца не сворачивались ниже, имея в виду, что второй столбец также может быть переменной длины?

Комментарии:

1. вы хотите реализовать это, используя только divs, или вы также можете использовать структуру таблицы?

2. Я бы предпочел DIV, если это возможно, но таблица была бы в порядке

3. Я думаю, что проблема с таблицей заключалась бы в том, что все строки были бы обрезаны в одной и той же точке.. где в идеале строки с разными атрибутами должны быть обрезаны в разных точках в зависимости от длины столбца атрибутов

Ответ №1:

Как насчет гибкого решения? Единственная проблема — это поддержка браузера, но если нет необходимости в устаревших браузерах, вы можете использовать эту приятную функцию.

демонстрация flex

CSS:

 .row
{
    width: 600px;
    background-color: red;
    margin-bottom: 10px;
    white-space: nowrap;
    padding: 5px;
    display: -moz-flex;
    display: flex;
}


.filename
{
    white-space: nowrap;
    overflow: hidden;
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 400px;
    white-space: nowrap;
    padding: 5px;
    border: 1px dotted white;
    margin: 2px;
}

.attributes
{
    flex-grow: 1;
    flex-shrink: 1;
    text-align: right;
    display: -moz-flex-inline-block;
    display: flex-inline-block;
    white-space: nowrap;
    padding: 5px;
    border: 1px dotted white;
    margin: 2px;
    overflow: hidden;
}

.download
{
    flex-grow: 1;
    flex-shrink: 1;
    display: -moz-flex-inline-block;
    display: flex-inline-block;
    text-align: right;
    white-space: nowrap;
    padding: 5px;
    border: 1px dotted white;
    margin: 2px;
    overflow: hidden;
}

http://jsfiddle.net/nLACS/10/

Поля, отступы, границы приведены только для демонстрации.

Комментарии:

1. фантастика, именно то, что мне было нужно. Я раньше не видел этих атрибутов flex-grow 🙂

2. Всегда пожалуйста! Это действительно хороший документ для проверки: css-tricks.com/snippets/css/a-guide-to-flexbox

3. Пожалуйста, если вы собираетесь публиковать решения Flexbox, по крайней мере, исправьте префиксы . Кроме того, нет flex-inline-block свойства.

Ответ №2:

Я предлагаю использовать display:table и table-cell следующим образом:

HTML

 <div class="row">
    <div class="filename">First column with some short text</div>
    <div class="tabletow">
        <div class="download">Download</div>
        <div class="attributes">[Some attributes]</div>
    </div>
</div>

<div class="row">
    <div class="filename">First column with some more short text</div>
    <div class="tabletow">
        <div class="download">Download</div>
        <div class="attributes">[Some attributes]</div>
    </div>
</div>

<div class="row">
    <div class="filename">Last row with longer text should be clipped but i...</div>
    <div class="tabletow">
        <div class="download">Download</div>
        <div class="attributes">[Attributes, Are, Different]</div>
    </div>
</div>

css

 div
{
    font-family: arial;
}

.row
{
    width: 600px;
    background-color: red;
    margin-bottom: 10px;
    white-space: nowrap;
    padding: 5px;
    display:table;
}

.filename
{
   display:table-cell;
    width:50%;
    max-width: 250px;
    overflow:hidden !important;
    float:left;
}
.tabletow{
    display:table;
    width:50%;
    float:right;
}

.tabletow > div{
    max-width:100px;
    overflow:hidden;
}

.download{
    width:25%;
}

.attributes,
.download
{
    display:table-cell;
}

скрипка

Ответ №3:

Привет, как я прокомментировал ранее, я реализовал элементы таблицы в скрипке

HTML

 <table border=1 frame=hsides rules=rows>
<tr class="rows">
    <td class="column1">
        First column with some short sdsadakjsdhajdhjkashdajskdhajskdhkatext
    </td>
    <td  class="column2">
        Download
    </td>
    <td  class="column3">
        [Some attributes]
    </td>
</tr>
<tr class="rows">
    <td class="column1">
        First column with some short sdsadakjsdhajdhjkashdajskdhajskdhkatext
    </td>
    <td  class="column2">
        Download
    </td>
    <td  class="column3">
        [Some attributes]
    </td>
</tr>
<tr class="rows">
    <td class="column1">
        First column with some short sdsadakjsdhajdhjkashdajskdhajskdhkatext
    </td>
    <td  class="column2">
        Download
    </td>
    <td  class="column3">
        [Some attributes]
    </td>
</tr>

CSS:

 table {
   border-collapse: collapse;
}
tr { 
   border: solid;
   border-color:white;
   border-width: 5px 0;
}
.column1,.column3 {
   width:25%;
   padding-bottom: 1em;
}
.column1{
   width:50%;
}

.rows{
   background-color: red;
}

ОБНОВЛЕННЫЙ FIDDLE

Комментарии:

1. кажется, что в Chrome выполняется перенос .. идея в том, что столбцы переполняются без переноса.

2. Привет добавил обновленную скрипку, так что у вас есть старая и новая скрипка в одном ответе. Надеюсь, это поможет