Question

是否可以截断输入type="file"中的文字，我的意思是，当我选择文件filename太长时，它应该是truncated。我试图申请text-overflow: ellipsis;，但没有任何变化。

Answer 1

如果为输入指定固定的width，则大多数浏览器应自行截断它。如果没有，您仍然可以使用text-overflow: ellipsis，但在使用其他两个属性并使用宽度之前，它不会有任何区别：

input[type=file] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px;
}

Answer 2

您是否尝试实际截断它或更改显示？您实际上无法设置该值，因为这是一个安全风险 - 没有浏览器允许这样做。要更改值的显示，您可以执行matewka建议的操作。为了更好地控制外观，您还可以隐藏输入并将其替换为包含相关值的<span>，如下所示：http://jsfiddle.net/TexasBrawler/jrJm2/2/

Answer 3

对于所有主流浏览器，我认为你不能设置文件上传框中的内容，因为这会打开大门，让你欺骗或强迫用户上传你不应该的文件（不是那样的）你愿意，但其他恶意的人可能）。

你能解释一下你试图解决的问题吗？我不清楚为什么你会关心文件名的长度 - 你真的不想对文件的内容感兴趣吗？

Answer 4

如何截断输入类型文件的文件名：

如果您的文件输入周围有一个容器，您可以将其设置为 display: flex;，它会被省略号截断。

尝试修改下面示例中的宽度并尝试删除 display: flex; 以查看文本溢出容器而不会被截断。

.file-input-container {
  display: flex;
  width: 160px;
  padding: 10px;
  background-color: #CCC;
}

<div class="file-input-container">
  <input type="file" />
</div>

截断输入类型=文件中的文本

4 个答案: