文件字段中的文本溢出列

Question

我有一个包含文件字段和图像预览的列的表单。 我的问题是在选择图像后，图像溢出列的名称。

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
  <label for="task_Asset">Asset</label>
  <i class="material-icons text-muted" rel="tooltip" title="" data-original-title="Valid formats are: .jpg .jpeg .png .bmp .gif. Maximum size is 5MB.">info_outline</i>
  <input id="picture-input" name="task[asset]" type="file">
  <div id="preview"></div>
</div>

我试过用css设计样式：

#picture-input {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

但它根本没有帮助。 添加max-width: 100%;或width: 100%;根本没有用，它会将名称截断为100％，但不会应用省略号。

任何想法如何解决这个问题，以使用高达100％的宽度并应用省略号？

我尝试过不是100％，而是95％max-width，这种情况发生了： 如果“......”或者是用户可以在那里阅读的最后一件事会很棒。或者至少扩展名（因此名称的实际结尾）是可见的。

好像Firefox有这个问题：

以下是Chrome浏览器的外观： 这是可以接受的。

Answer 1

看一下这支笔：https://codepen.io/Loutrinos/pen/XaYqmY 如果您使用overflow:hidden添加包装器div并对input执行相同操作，则默认情况下会隐藏额外的文本。

.container {
  width: 25%;
  height: 100px;
  background-color: lightblue;
}

input {
  width: 100%;
  overflow:hidden;
}

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

更新了代码以反映基于百分比的布局

Answer 2

尝试将父<div>设为overflow-y:auto，将子<input>设为overflow-y:hidden

div > #picture-input{
    overflow-y: auto;
}

#picture-input{
    overflow-y: hidden;
}

编辑1：结果将overflow-y:auto设置为父级仅用于允许在子元素中滚动。要完全隐藏溢出，请将其设置为hidden。

div > #picture-input{
    overflow-y: hidden;
}