overflow-x移动文本

Question

我正在制作文件管理器，它应该在选择文件时显示有关该文件的一些细节。但是，文本会向上移动一点，因此它看起来不合适。

HTML

<img src='folder.png' width='60' style='float: left;vertical-align: top;margin-right: 8px;'>";
<span class='text-muted'>Name:</span> 
<span style='display: inline-block; min-width: 100px;max-width: 120px; overflow-x: hidden; text-overflow: ellipsis;'>codeflask</span>
<span class='text-muted'>Size:</span> 
<span style='display: inline-block; min-width: 100px;max-width: 120px; overflow-x: hidden; text-overflow: ellipsis;'>4 KB</span>
<br>
<span class='text-muted'>Type:</span> 
<span style='display: inline-block; min-width: 100px;max-width: 120px; overflow-x: hidden; text-overflow: ellipsis;'>directory</span>

当我删除overflow-x: hidden;部分时，它看起来很好。但是，文本溢出，我希望它在省略时太长时停止使用省略号。

我该如何解决这个问题？

Answer 1

尝试添加此CSS

span { vertical-align: baseline; }

将所有这些（在一行中）放在同一垂直位置。

（如果你还有其他跨度，你需要使用你给它们全部的类，或者在HTML中使用包装元素和像

这样的组合选择器

#my_wrapper span { vertical-align: baseline; }

Answer 2

问题是您在inline-block元素（属性名称）后使用inline元素（属性值）。可以使用inline-block显示对齐它们，并将vertical-align设置为相同的值。我重写了一点 - 并且还删除了内联CSS并创建了类：

span {
  font-family: sans-serif
}
.property-name {
  display: inline-block;
  vertical-align: middle;
  width: 4em;
  text-align: right;
}
.property-value {
  font-weight: bold;
  display: inline-block;
  min-width: 100px;
  max-width: 120px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.file-thumb {
  float: left;
  vertical-align: top;
  margin-right: 8px;
}

<img src='folder.png' width='60' class='file-thumb'>
<span class='property-name'>Name:</span> 
<span class='property-value'>codeflask</span>
<span class='property-name'>Size:</span> 
<span class='property-value'>4 KB</span>
<br>
<span class='property-name'>Type:</span> 
<span class='property-value'>directory</span>

Answer 3

你应该使用white-space: nowrap;