CSS 填充剩余的水平空间并显示一个省略号答案

【问题标题】：CSS fill remaining horizontal space and show an ellipsisCSS 填充剩余的水平空间并显示一个省略号
【发布时间】：2014-06-25 17:33:14
【问题描述】：

我正在尝试使用 div 元素创建一个包含 2 列的类似表格的显示。一列用于图像 URL，而另一列用于文件大小。文件大小列的固定宽度为 150 像素，URL 列应填满剩余空间。如果 URL 没有足够的空间，它应该切断并显示一个省略号。然而，发生的事情是文本继续到下一行。我也试过设置 white-space: nowrap;但这会导致整个 div 换行。

我的 HTML 代码如下所示。

<div id="container>
    <div class="row">
        <div class="imageURL">http://mywebsite.com/image1.jpg</div>
        <div class="fileSize">586 KB</div>
    </div>
    <div class="row">
        <div class="imageURL">http://mywebsite.com/image2.jpg</div>
        <div class="fileSize">785 KB</div>
    </div>
    <div class="row">
        <div class="imageURL">http://mywebsite.com/image3.jpg</div>
        <div class="fileSize">258 KB</div>
    </div>
</div>

这里是 CSS。

#container {
    width: 100%;
}
.row {
    padding: 5px;
}
.imageURL {
    display: inline;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}
.fileSize {
    display: inline-block;
    width: 150px;
    float: right;
}

【问题讨论】：

标签： html css

【解决方案1】：

我认为您正在以下JSFIDDLE 中寻找类似的东西。我已将您的 CSS 重新排列为如下所示：

#container {
width: 100%;
}
.imageURL {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    width:auto;
    min-width:100px;
    max-width:65%;
    white-space:nowrap;
}
.fileSize {
    display: inline-block;
    margin-left: 100px;

}
.row {
  overflow: hidden;
   white-space:nowrap;
}

主要是，我添加了 white-space nowrap 属性，同时将两个 div 保持在同一行，我取出了浮动，这使它成为一个块级元素，并且只是放置了一个特定数量的边距它。关键来自 .imageURL 类中的宽度，我在其中添加了自动宽度、最小宽度和最大宽度，这允许省略号在某些点发生。

【讨论】：

【解决方案2】：

将 .imageURL 更改为以下内容：

.imageURL {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 400px;
    display: block;
    overflow: hidden
}

希望这有帮助！;)

JSFiddle Example

【讨论】：