Question

我尝试使用div元素创建一个包含2列的表格式显示。一列用于图像URL，另一列用于文件大小。文件大小列的固定宽度为150px，URL列应填充剩余空间。如果URL没有足够的空间，它应该切断并显示省略号。然而，发生的事情是文本只是继续到下一行。我也试过设置白色空间：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;
}

Answer 1

将.imageURL更改为以下内容：

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

希望这有助于！;）

JSFiddle Example

Answer 2

我认为您正在寻找以下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保持在同一行，我取出了float，这使得它成为块级元素，并且只是将一个边距放置为特定的它。密钥来自.imageURL类中的宽度，其中我添加了自动宽度，最小宽度和最大宽度，这允许省略号在某些点发生。

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

2 个答案: