嘿，我来帮你搞定这个问题！你之前用<br>标签肯定没用，因为input的placeholder属性只支持纯文本，不会解析任何HTML标签，所以<br>会被当成普通字符显示出来，而不是换行。

下面给你两种可行的解决方案：

方法1：使用Unicode换行符（最简单直接） #

直接在placeholder属性里插入换行符的Unicode编码
（对应换行符\n），如果需要兼容更多场景，也可以用
（回车+换行的组合）。

示例代码：

<div class="form-group">
  <input type="text" class="form-control ph" id="" placeholder="Qualification&#10;Education&#10;Background *">
</div>

⚠️ 注意：部分浏览器可能需要你调整input的高度，不然换行后的内容可能被截断。可以加一点CSS来适配：

.ph {
  min-height: 60px; /* 根据换行行数调整高度 */
}

方法2：用CSS伪元素模拟Placeholder（更灵活） #

如果第一种方法在某些浏览器里表现不符合预期，或者你需要更精细的样式控制，可以用CSS伪元素来模拟placeholder效果：

首先写CSS：

/* 给input设置相对定位，方便伪元素定位 */
.ph {
  position: relative;
  padding-top: 24px; /* 给模拟的placeholder留出空间 */
  min-height: 60px;
}

/* 模拟placeholder的伪元素 */
.ph::before {
  content: "Qualification\A Education\A Background *";
  position: absolute;
  top: 8px;
  left: 12px;
  color: #6c757d; /* 匹配原生placeholder的灰色 */
  white-space: pre; /* 保留换行符 */
  pointer-events: none; /* 让点击穿透到input，不干扰输入 */
}

/* 输入时隐藏伪元素 */
.ph:focus::before {
  display: none;
}

然后修改HTML，清空原生的placeholder：

<div class="form-group">
  <input type="text" class="form-control ph" id="">
</div>

这种方法的好处是你可以完全自定义placeholder的样式，比如字体、行高、颜色等，兼容性也更好。

内容的提问来源于stack exchange，提问作者John