聚焦输入时的省略号

Question

聚焦输入时的省略号

cssinputplaceholderellipsis

9

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

- random_stuff

为什么您想要一个占位符，其中一些文本始终被模糊处理？... 占位符是用于用户信息的，如果其中的一部分从未显示，则它存在的意义就不存在。 - Toni Leigh

省略号只会出现在包含输入字段的元素太窄而无法显示完整占位符的情况下。 - random_stuff

我认为看到完整的占位符是期望的行为，因为它是一个提示用户填写字段的提示 - 你能在jsfiddle上做一个例子吗？ - Toni Leigh

包含输入字段的元素可以被拉伸和压缩-这不会产生完整的小提琴，因为这种行为来自一堆源文件。这里有一个小提琴，展示了省略号问题：http://jsfiddle.net/Lptt36ar/1/如果占位符完全可见，则不应该出现省略号，并且用户应该看到完整的占位符。如果用户缩小框，以至于只有部分占位符可见，则应该出现省略号。现在，当光标不在输入框中时，我的操作是有效的，但是当光标在输入框中时，省略号会消失。 - random_stuff

此外，.box:focus {text-overflow: ellipsis;} 也没有帮助。 - random_stuff

首先：一个简化的JSFiddle正是我们所需要的，我们想要检查问题，而不是整个网站；其次：那里的CSS片段将无法在占位符上工作。 - Toni Leigh

3个回答

0

用 !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/

- Bartezz

这并没有回答问题，!important 在 CSS 中始终是覆盖的最糟糕选项。 - Toni Leigh

1

我没有提供完全可行的代码，但这是一个答案…… 我添加了一个示例来证明我的观点。至于！important，它是有效的CSS，并不是最糟糕的选择，但在某些情况下，当你需要覆盖用户代理CSS时，可以将其作为最后的选择。 - Bartezz

这个小提琴似乎只在火狐浏览器中有效，而在谷歌浏览器或Safari中无法使用。 - undefined

0

编辑：啊哈，在Firefox中可以正常工作，但在Chrome中无法正常工作。

真正奇怪的是，在fiddle中确实可以正常工作。我将输入框的宽度设置为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;
}

}

- Cream Whipped Airplane

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Toni Leigh · Accepted Answer

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

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

在您的示例中（我在此处编辑了以演示如何样式化占位符），您可以看到占位符中有一些永远无法看到的信息 - 通过查看您的字段，我只会想到“搜索意图名称并显示...什么”？

实际上，text-overflow: ellipsis;不适用 - 它是块级别的，因为它的本质（它需要多大就有多大），所以不能认为占位符已经溢出其容器。

一些解决方案：

1.使文本字段更大。

2.使占位符更简洁（我猜您可以省略“并显示示例”）。

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

所有这些选项都把用户放在第一位，即更重要的是让用户清楚地显示所需的所有信息，这种事情应该影响设计和开发决策。