寻找可给文本添加id/class且不换行的HTML标签

当然有啦！针对你的场景——既要给文本添加id/class用于JavaScript操作，又不想让后续的<input>换行，有两个非常合适的选择：

1. <span>：通用无样式行内容器 #

<span>是HTML里专门用来包裹小段文本或行内元素的“中性”容器，它没有任何默认样式，也不会改变原有布局（默认是行内显示），完全符合你的需求。

代码示例 #

<!-- 用span包裹文本并设置id -->
<span id="email-label">email</span>
<input type="email">

<!-- 用于触发修改的按钮 -->
<button onclick="updateLabel()">修改文本</button>

JavaScript修改示例 #

function updateLabel() {
  // 通过id获取span元素并修改文本
  document.getElementById('email-label').textContent = '邮箱地址';
}

2. <label>：语义化的表单关联标签 #

如果你这段文本是用来描述表单输入框的，那<label>是更优的选择！它不仅支持添加id/class，还能通过for属性和<input>的id绑定——点击文本时会自动聚焦对应的输入框，大大提升表单的可访问性。

代码示例 #

<!-- label通过for属性绑定input的id，同时给自己设置id -->
<label for="email-input" id="email-label">email</label>
<input type="email" id="email-input">

<button onclick="updateLabel()">修改文本</button>

JavaScript修改示例 #

function updateLabel() {
  document.getElementById('email-label').textContent = '请输入邮箱';
}

为什么不用<p>？ #

<p>是块级元素（默认display: block），会独占一行，所以会导致后续的<input>被迫换行，这正是你想要避免的问题。而<span>和<label>都是行内元素（默认display: inline），会和<input>在同一行显示。

另外要注意：<font>标签确实已经被HTML5废弃了，样式控制完全可以通过给<span>/<label>添加class，用CSS来实现，这是更规范的做法。

内容的提问来源于stack exchange，提问作者Marcel Kämper