7

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

4

4 回答 4

13

如果您width为输入指定一个固定值，大多数浏览器应该自己截断它。如果没有，您仍然可以使用text-overflow: ellipsis，但除非您将它与两个附加属性和宽度一起使用，否则它不会有任何区别：

input[type=file] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px;
}
于 2013-10-30T22:58:22.243 回答
2

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

于 2013-10-30T23:01:56.990 回答
1

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

如果您的文件输入周围有一个容器，您可以将其设置为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>

于 2021-02-24T01:38:32.477 回答
0

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

你能更详细地解释你试图解决的问题吗？我不清楚为什么你会关心文件名的长度——你真的对文件的内容不感兴趣吗？

于 2013-10-30T23:09:37.907 回答