css - 重点输入的省略号

Question

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

Answer 1

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

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

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

事实上，text-overflow: ellipsis; won't apply - 它是 block 级的，占位符不能被认为已经溢出它的容器，因为它的性质(它需要的那么大)。

一些解决方案:

使文本字段更大。

使占位符更简洁(我猜您可以删除“并显示示例”)。

通过在焦点上使用弹出窗口或仅在上方或下方使用一行文本，将提示放在字段之外。

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