DIV float：右边没有文本环绕

Question

我正在尝试在CSS / HTML中创建一个包含三列的伪表：

列：

• 长文字字段，text-align：left
• 可变文本字段，text-align：right
• 固定文字字段，text-align：right

使用短文本，一切都正确显示..但如果第一列或第二列太大，文本将被包装：

我想要的是第一行溢出椭圆，使其显示如下：

但我似乎无法正确使用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/

任何人都可以建议使第一列溢出的最佳方法，以便后面的两列不会包含在下面，请记住第二列也可以是可变长度吗？

Answer 1

灵活解决方案怎么样？唯一的问题是浏览器支持，但如果不需要过时的浏览器，您可以使用这个不错的功能。

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/

边距，填充，边框仅用于演示。

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

fiddle

Answer 3

正如我之前评论过的那样，我已经在fiddle

中的表格元素中实现了

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

UPDATED FIDDLE