如何设置表单输入框内文本样式？解决长文本不换行问题

核心问题1：选择器完全错误 #

你写的CSS选择器#retirement-services input[type="value"]存在两处问题：

• HTML里的容器id是rs-retirement-services，不是retirement-services，选择器根本匹配不到目标元素
• 不存在type="value"的input类型，你的message输入框是type="text"，正确选择器应该是#rs-retirement-services input[type="text"]或直接用#Message（它有唯一id）

核心问题2：单行input本身不支持换行 #

就算选择器正确，input[type="text"]是单行输入控件，设计逻辑就是只能显示单行文本，不管怎么设置text-wrap都无法实现换行。要做可换行的多行输入框，必须把<input type="text">换成<textarea>。

正确实现方式 #

修改后的HTML：

将原message输入框替换为textarea：

<div id="rs-retirement-services">
  <fieldset>
    <div class="row">
      <!-- 邮箱输入框保持不变 -->
      <section class="col-md-8 offset-left">
        <h4 class="field-title">Email Address</h4>
        <label class="input">
          <input
            type="email"
            name="ShareEmail"
            id="ShareEmail"
            placeholder="Email Address"
          />
        </label>
      </section>
      <!-- 替换后的Message输入框 -->
      <section class="col-md-8 offset-left">
        <h4 class="field-title">Message</h4>
        <label class="input">
          <textarea
            name="message"
            id="Message"
            placeholder="Write something..."
            style="padding: 19px; min-height: 158px;"
          >alkfjawlkejr;alwkeraflkajwer;lkawej;rakw</textarea>
        </label>
      </section>
    </div>
  </fieldset>
</div>

配套CSS（可选，用于控制换行和布局）：

#rs-retirement-services #Message {
  text-wrap: wrap;
  max-width: 300px;
  width: 100%; /* 让输入框自适应容器宽度 */
  resize: vertical; /* 允许用户垂直调整高度，按需选择 */
}

修改后，输入的长文本会自动换行，同时支持多行输入，完全解决你的问题。

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