如何在contenteditable元素达最大高度时禁止换行（无需按回车）

方案一：CSS实现（全局禁止自动换行） #

如果需求是无论元素高度是否达到上限，都始终禁止自动换行，直接用CSS就能搞定：

.user-input {
  max-height: 100px; /* 替换成你需要的最大高度 */
  white-space: nowrap; /* 强制内容单行，禁止自动换行 */
  overflow: hidden; /* 超出容器的内容隐藏，也可以用overflow-x: auto; 显示横向滚动条 */
  line-height: 1.5; /* 配合max-height控制可容纳的行数 */
  border: 1px solid #ddd;
  padding: 8px;
}

方案二：JavaScript实现（仅达到max-height后禁止换行） #

如果需要元素未达高度上限时允许自动换行，达到后才禁止，CSS无法动态判断高度变化，需要用JS处理：

<div class="user-input" contenteditable="true"></div>

<style>
.user-input {
  max-height: 100px;
  overflow: hidden;
  line-height: 1.5;
  border: 1px solid #ddd;
  padding: 8px;
  white-space: pre-wrap; /* 默认允许自动换行 */
}

.no-wrap {
  white-space: nowrap; /* 禁止换行的样式 */
}
</style>

<script>
const inputBox = document.querySelector('.user-input');
const maxAllowedHeight = parseInt(getComputedStyle(inputBox).maxHeight);

// 监听输入，动态切换换行规则
inputBox.addEventListener('input', () => {
  if (inputBox.scrollHeight > maxAllowedHeight) {
    inputBox.classList.add('no-wrap');
    // 清除已有的换行符，确保内容单行
    inputBox.textContent = inputBox.textContent.replace(/\n/g, '');
  } else {
    inputBox.classList.remove('no-wrap');
  }
});

// 阻止手动回车换行
inputBox.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') e.preventDefault();
});
</script>

这个方案会实时检查元素内容高度，一旦超过设定的max-height，就强制内容单行，同时阻止用户手动按回车换行；当内容高度回落至上限内时，恢复自动换行。

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