文件字段中的文本溢出列答案

【问题标题】：Text from file field overflows column文件字段中的文本溢出列
【发布时间】：2018-02-01 07:16:24
【问题描述】：

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

<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 中的外观：这是可以接受的。

【问题讨论】：

如何将overflow 和text-overflow 应用于div？（不是input）。
它不起作用。
省略号是否适用？它们出现在我这边。
没有width？不。有时它适用，例如 100-95% 不适用。 95-60% 将应用“screenshot-412421...15”，而在 50% 以下不再应用，这很奇怪。好吧，无论如何我需要使用 100% 左右，所以我们只能说它不起作用。

标签： html css twitter-bootstrap sass

【解决方案1】：

看看这支笔：https://codepen.io/Loutrinos/pen/XaYqmY 如果您添加一个带有overflow:hidden 的包装器 div 并对input 执行相同操作，它将默认隐藏额外的文本。

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

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

&lt;div class="container"&gt;&lt;input type="file"&gt;&lt;/div&gt;

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

【讨论】：

这在您有响应式布局时不起作用。它特别必须是 % 值，而不是静态大小。更重要的是，当你有静态宽度时，你甚至不需要包装器。
更新了标记和 css，它仍然按预期工作。也许您的 css 存在另一个问题，导致输入不会溢出。
但是，你知道......它不像预期的那样工作。您刚刚截断了一半的按钮。
我再次更新了代码 sn-p 以使其更大一些。即使存在该问题，该文件仍然可以理解overflow:hidden，因此请提供有关覆盖默认行为的任何 css 的更多反馈

【解决方案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;
}

【讨论】：

它现在有滚动条并且它根本没有被截断。