CSS 占位符文本截断

占位符文本（Placeholder text）是指在表单元素中预设的提示性文字，一般都是灰色字体且不可编辑。在实际使用中，占位符文本会在用户输入内容后自动消失，占用表单的空间。

CSS 占位符文本截断就是指通过 CSS 实现截断占位符文本，使其仅在用户未输入内容时展示，一旦用户开始输入，占位符文本就被截断、消失，不再占用表单的空间。实现这个效果的主要方法是使用 :placeholder-shown 伪类和 ::placeholder 伪元素。

代码实现

为了让 CSS 占位符文本截断的效果更加清晰，下面将给出一个简单的表单示例，通过代码实现截断占位符文本：

<form>
  <label>
    Name:
    <input type="text" class="input-box" placeholder="Enter your name here">
  </label>
  <label>
    Email:
    <input type="email" class="input-box" placeholder="Enter your email here">
  </label>
</form>

上面是一个简单的表单，其中包含两个输入框，分别用于输入姓名和邮箱，它们都有占位符文本。

现在，我们使用 CSS 对占位符文本进行截断：

.input-box::placeholder {
  opacity: 1;
  transition: opacity 0.2s;
}

.input-box:focus::placeholder, .input-box:not(:placeholder-shown)::placeholder {
  opacity: 0;
}

上面的 CSS 代码中，我们为 .input-box 类添加了 ::placeholder 伪元素，然后定义了两个规则：

• input-box::placeholder：设置占位符文本的透明度为 1，表示占位符文本一直可见。
• input-box:focus::placeholder, .input-box:not(:placeholder-shown)::placeholder：当输入框获得焦点或者用户开始输入内容时，占位符文本的透明度设置为 0，以实现截断占位符文本的效果。

总结

CSS 占位符文本截断可以优化表单的用户体验，减少占位符文本对表单空间的占用。在实际使用中，需要注意兼容性问题，避免影响用户体验。