通过设置 maxlength 并禁用回车键，可在 中模拟“固定行数+单行滚动”效果，避免内容被推离视口，同时保留完整文本数据。
通过设置 `maxlength` 并禁用回车键，可在 `
在 Web 开发中，原生 <textarea></textarea> 或 contenteditable 元素并不支持“强制限制最大行数且禁止新增换行”的行为——这是因为换行符（\n）本身会触发渲染换行，而 CSS 的 white-space: nowrap 与 textarea 不兼容，max-height + overflow: hidden 又仅能裁剪视觉显示，无法阻止光标跳转或内容位移。
因此，最可靠、轻量且符合语义的实现方案是：放弃按“行数”控制，转为按“字符数”约束，并主动拦截换行操作。具体步骤如下：
-
禁用换行输入：监听
keydown事件，阻止 Enter（及 Shift+Enter）默认行为； -
设置合理
maxlength：根据字体、字号、容器宽度估算单行最大字符数，再乘以目标行数（例如：14px 等宽字体下，30 字符/行 × 3 行 =maxlength="90"）； -
视觉辅助（可选）：添加
resize: none、overflow: hidden和text-overflow: clip配合white-space: pre，确保超出部分不可见但文本仍可选中/复制。
<textarea id="lineLimitedArea" maxlength="90" placeholder="最多输入 3 行（约 90 字符），回车无效" style="
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
line-height: 1.4;
resize: none;
overflow: hidden;
white-space: pre;
"></textarea>
document.getElementById('lineLimitedArea').addEventListener('keydown', (e) => {
if (e.key === 'Enter' || (e.key === 'Enter' && e.shiftKey)) {
e.preventDefault(); // 彻底阻止换行
}
});
⚠️ 注意事项：
-
maxlength是基于字符计数，非像素高度，需结合字体度量做粗略校准（如使用等宽字体更稳定）； - 不要依赖
scrollHeight/clientHeight动态计算行数——受缩放、字体渲染差异影响大，且存在竞态问题； - 若必须精确控制行高（如配合富文本），建议采用自定义
<div contenteditable> + Canvas 测量 + 输入代理的方案，但复杂度显著上升； <li>所有文本仍保留在 DOM 中，可通过 <code>.value正常获取，不影响表单提交或数据持久化。
该方案兼顾兼容性、性能与可维护性，是当前浏览器环境下最务实的“伪多行单行滚动”实现。
