如何限制textarea或contenteditable div最大行数，禁止新增换行

核心需求 #

限制输入框最多显示3行文本，达到行数上限后：

• 禁止新增换行（包括手动回车和自动换行）
• 新增内容追加到最后一行，超出可视区域的部分隐藏，但文本内容完整保留

优先方案：textarea实现 #

通过CSS固定高度+隐藏溢出，配合JS限制行数和内容处理，完美匹配需求：

CSS 代码 #

.max-lines-textarea {
  /* 3行高度 = 行高 × 行数，可根据需求调整行高 */
  line-height: 1.5em;
  height: calc(1.5em * 3);
  /* 隐藏超出可视区域的内容 */
  overflow: hidden;
  /* 仅在手动输入回车时换行，禁止自动换行 */
  white-space: nowrap;
  /* 禁止拖拽调整尺寸 */
  resize: none;
  width: 300px;
  padding: 8px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

JS 代码 #

const textarea = document.querySelector('.max-lines-textarea');
const MAX_LINES = 3;

// 监听输入事件，限制行数
textarea.addEventListener('input', function() {
  const lines = this.value.split('\n');
  if (lines.length > MAX_LINES) {
    // 把超出的行内容合并到最后一行
    const validLines = lines.slice(0, MAX_LINES);
    validLines[MAX_LINES - 1] += lines.slice(MAX_LINES).join('');
    this.value = validLines.join('\n');
    // 保持光标在内容末尾
    this.setSelectionRange(this.value.length, this.value.length);
  }
});

// 处理粘贴操作，防止粘贴多行内容突破限制
textarea.addEventListener('paste', function(e) {
  e.preventDefault();
  const pastedText = e.clipboardData.getData('text');
  const currentLines = this.value.split('\n');

  if (currentLines.length >= MAX_LINES) {
    // 已达最大行数，粘贴内容直接追加到最后一行（去掉换行符）
    this.value += pastedText.replace(/\n/g, '');
  } else {
    const combinedText = this.value + pastedText;
    const combinedLines = combinedText.split('\n');
    if (combinedLines.length > MAX_LINES) {
      // 粘贴后会超出行数，合并超出内容到最后一行
      const validLines = combinedLines.slice(0, MAX_LINES);
      validLines[MAX_LINES - 1] += combinedLines.slice(MAX_LINES).join('');
      this.value = validLines.join('\n');
    } else {
      this.value += pastedText;
    }
  }
  this.setSelectionRange(this.value.length, this.value.length);
});

方案说明 #

• CSS固定输入框高度为3行，white-space: nowrap确保只有手动回车才会换行，避免内容自动换行新增行；
• JS监听输入和粘贴事件，一旦行数超过限制，自动将超出的内容合并到最后一行，同时保持光标在末尾，不影响输入体验；
• 超出可视区域的内容会被overflow: hidden隐藏，但文本内容完整保留在textarea的value中。

备选方案：contenteditable div实现 #

如果需要更自定义的样式，可使用contenteditable div，核心逻辑和textarea一致：

CSS 代码 #

.max-lines-editable {
  line-height: 1.5em;
  height: calc(1.5em * 3);
  overflow: hidden;
  white-space: nowrap;
  width: 300px;
  padding: 8px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
/* 隐藏自动生成的<br>标签，避免额外换行 */
.max-lines-editable br {
  display: none;
}

JS 代码 #

const editable = document.querySelector('.max-lines-editable');
const MAX_LINES = 3;

// 限制输入行数
editable.addEventListener('input', function() {
  const text = this.innerText;
  const lineCount = (text.match(/\n/g) || []).length + 1;
  if (lineCount > MAX_LINES) {
    // 找到倒数第二个换行符，合并后续内容到最后一行
    const lastBreakIndex = text.lastIndexOf('\n', text.lastIndexOf('\n') - 1);
    const newText = text.slice(0, lastBreakIndex + 1) + text.slice(lastBreakIndex + 1).replace(/\n/g, '');
    this.innerText = newText;
    // 移动光标到内容末尾
    const range = document.createRange();
    const selection = window.getSelection();
    range.selectNodeContents(this);
    range.collapse(false);
    selection.removeAllRanges();
    selection.addRange(range);
  }
});

// 达到最大行数时，阻止回车新增行
editable.addEventListener('keydown', function(e) {
  if (e.key === 'Enter') {
    const lineCount = (this.innerText.match(/\n/g) || []).length + 1;
    if (lineCount >= MAX_LINES) {
      e.preventDefault();
    }
  }
});

方案说明 #

• 通过white-space: nowrap和隐藏<br>标签，确保只有手动回车才会换行；
• keydown事件阻止达到最大行数后的回车操作；
• input事件合并超出的内容到最后一行，同时调整光标位置，保证输入流畅。

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