重点输入的省略号答案

【问题标题】：Ellipsis on focused input重点输入的省略号
【发布时间】：2015-09-02 23:55:39
【问题描述】：

我有一个带有占位符的输入元素，它需要一个 CSS 省略号。当输入没有焦点时，省略号可以正常工作，但是当我单击输入字段时，省略号会消失，我会看到完整的占位符。如何防止这种情况发生？

【问题讨论】：

为什么你想要一个占位符，其中某些文本总是被混淆？ ...占位符用于用户信息，如果其中的一部分从未显示，那么它就没有任何意义
只有在包含输入字段的元素太细而无法显示整个占位符时才会出现省略号。
我认为看到完整的占位符是期望的行为，因为它是用户帮助他们填写该字段的提示 - 你可以在 jsfiddle 中举个例子
包含输入字段的元素可以被拉伸和压扁——这不会完全奏效，因为这种行为来自一堆源文件。这是一个显示省略号问题的小提琴：jsfiddle.net/Lptt36ar/1 如果占位符完全可见，则应该没有省略号，用户应该看到完整的占位符。如果用户缩小框以使占位符的一部分可见，则应该有一个省略号。现在当光标不在输入框中时我正在做的工作，但是当光标在输入框中时省略号消失。
另外，.box:focus { text-overflow: ellipsis; } 没有帮助

【解决方案1】：

浏览器的默认功能是将整个占位符显示在焦点上，这是有充分理由的。

占位符的目的是为用户提供有关字段的信息，因此每个字符都应该可供用户阅读，即使超出了框。

在您的示例 (which I've edited here to demonstrate how to style placeholders) 中，您可以看到占位符中有一些永远看不到的信息 - 通过查看您的字段，我只会想“搜索意图名称并显示......什么”？

事实上，text-overflow: ellipsis;won't apply - 它是块级的，占位符不能被认为溢出它的容器，因为它的性质（它需要多大）。

一些解决方案：

使文本字段更大。
使占位符更简洁（我猜您可以删除“并显示示例”）。
通过在焦点上使用弹出窗口或仅在上方或下方使用一行文本，将提示置于字段之外。

所有这些选项都将用户放在首位，也就是说，更重要的是用户清楚地显示他们需要的所有信息，并且这类事情应该为设计和开发决策提供信息。

【讨论】：

同样，这个输入框的容器可能会改变大小，所以仅仅改变输入框的大小或占位符消息是行不通的。我想也许为容器设置一个最小尺寸可能会解决这个问题，但我不允许因为其他东西会在下面。
我必须承认我不明白这里的逻辑，占位符需要可见，以便用户可以查看它，这就像掩盖了博客文章的最后一段，它可能适合样式，但用户无法阅读！
@ToniLeigh，但浏览器的默认功能无论如何都无济于事。所以我不明白你的论点。试试小提琴，你能读懂整个占位符，即使没有 text-overflow: ellepsis？ jsfiddle.net/Lptt36ar/1
@Bartezz 我的论点是占位符（或等效的用户提示）必须完全可读才能使用，因此建议解决此问题的最佳方法是重新设计事物您不需要在占位符上使用省略号 - 关键在于您在任何情况下都无法读取整个占位符，这会使它变得无用
@Bartezz 不，浏览器功能无法满足这一特定要求，但浏览器功能被设计为可用，而 OP 的请求不是 - 浏览器正在做正确的事情

【解决方案2】：

用 !important 覆盖

&[placeholder] {
    overflow: hidden;  
    text-overflow:ellipsis !important;
    white-space: nowrap;
}
&::placeholder {
    overflow: hidden;  
    text-overflow:ellipsis !important;
    white-space: nowrap;
}

在此处查看工作示例，在 Chromium 中测试：http://jsfiddle.net/Lptt36ar/9/

【讨论】：

这并不能回答问题，!important 始终是覆盖 css 的最差选择
我没有提供正确的完整工作代码。但这是一个答案。我添加了一个小提琴来证明我的情况。 Aa for !important，它是完全有效的 css，不是最糟糕的选择，而是在某些情况下覆盖用户代理 css 时的最后手段。

【解决方案3】：

编辑：啊哈，它适用于 FF，但不适用于 Chrome..

真正奇怪的是，在小提琴中它确实有效。我已将输入的宽度设置为 20%，因此如果您调整屏幕大小，您会看到占位符被截断并替换为省略号。即使它有焦点。

但由于某种原因，我无法在我的应用程序中复制它。一旦我关注输入，就会显示整个占位符。有人知道为什么会这样吗？

http://jsfiddle.net/Lptt36ar/23/

SCSS

input {
display: inline-block;
margin: 0;
outline-color: rgb(0, 0, 0);
outline-offset: 0px;
outline-style: dashed;
outline-width: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 20%;
&[placeholder] {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
&::placeholder {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

}

【讨论】：