HTML 输入字段占位符文本在末尾被截断

Question

我有一个 HTML 输入表单，其中包含一个占位符文本，该文本在末尾被截断，超出了填充。

我找不到导致它的原因。

Answer 1

回答我自己的问题。事实证明这不是我的任何习惯造成的 CSS:

原来是输入框的Chrome"X"按钮引起的：

删除它的唯一方法是添加实验性 CSS 伪元素 ::-webkit-search-cancel-button 并将其 display 设置为 none。不过我不会这样做的。

::-webkit-search-cancel-button {
    display: none;
}

分享此内容以帮助其他人。

Answer 2

您也可以使用 text-overflow: ellipsis;。 text-overflow CSS 属性设置如何向用户显示隐藏的溢出内容。它可以被剪裁、显示省略号 ('...') 或显示自定义字符串。可以参考下面的扭结看例子：

HTML input field placeholder text cut off at the end