HTML输入占位符文本溢出：焦点对准时，省略号不起作用（仅适用于Webkit）

Question

在基于Webkit的浏览器（Google Chrome和Safari）中，当我尝试在输入元素中显示占位符文本时，如果占位符太长，我想使用class Event < ApplicationRecord belongs_to :user has_many :locations, dependent: :delete_all accepts_nested_attributes_for :locations, reject_if: :all_blank, allow_destroy: true end CSS来显示“ ... “以剪切文本。

这首先起作用，但是当我在输入任何内容之前单击输入元素时，占位符仍在显示，但省略号不显示。

示例：https://jsfiddle.net/cqsguwpm/1/

请注意，这在Firefox中不会发生，因此我认为此问题仅在基于Webkit的浏览器中发生。

如示例中所示，我也尝试将text-overflow: ellipsis规则添加到text-overflow: ellipsis和.input:focus::placeholder { }，因为我怀疑焦点和活动样式已覆盖了省略号规则，但显然仍然不起作用

我想知道这在基于Webkit的浏览器中是否可行，因为我猜测这可能只是Webkit的缺点之一。

Answer 1

摆弄了您的jsfiddle之后，我不知道为什么会发生这种情况。没有什么是不可能的，但是经过多年使用CSS攻克错误之后，我可能不会再继续研究这一问题了。如果您确实需要省略号，请尝试以下操作：

<input type="text" placeholder="it's a really long placeholder"><span></span>

.search-bar {
  overflow: hidden;
  text-overflow: ellipsis;
}
span {
  margin-left: -15px;
  background: #fff;
}
input:focus + span::after {
  content: "...";
}

您必须使用字体大小，字体系列和颜色来使其正确使用。