Question

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

Answer 1

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

占位符的目的是为用户提供有关该字段的信息，因此每个字符都应该供用户阅读，即使是在框外也是如此。

在您的示例（which I've edited here to demonstrate how to style placeholders）中，您可以看到占位符中的信息永远不会被看到 - 通过查看您的字段，我只是在思考＆＃39;搜索意图名称和显示......什么＆＃39;？

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

一些解决方案：

使文字字段更大。
让占位符更简洁（我猜你可以放弃＆＃39;并显示示例＆＃39;）。
通过使用焦点弹出窗口或上方或下方的一行文字将小费放在字段外。

所有这些选项都将用户放在第一位，即更重要的是用户必须清楚地显示他们需要的所有信息，这类事情应该告知设计和开发决策。

Answer 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/

Answer 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;
}

}

关于重点输入的省略号

3 个答案: