如何让contenteditable的title元素占满可用空间而非窗口宽度？

问题说明 #

• 页面结构：分为side menu和tasks container；tasks container包含row container，其左侧是checkbox与title元素，右侧是details
• title元素设置contenteditable="true"（因特殊需求不使用input标签）
• 需求：title占满所在区域可用空间，文本长度超过可用空间时不换行并隐藏超出部分
• 当前问题：无法确保title宽度始终为可用空间的100%（取消注释CSS中的width: 470px可查看近似预期效果）

解决方案 #

通过弹性布局配合文本溢出样式即可实现需求，不需要固定宽度：

1. 给row container设置弹性布局，让子项自动分配空间：

.row-container {
  display: flex;
  align-items: center;
  gap: 8px; /* 可根据需求调整复选框与title的间距 */
}

2. 给title元素设置以下样式，实现占满剩余空间并处理超长文本：

.title {
  flex: 1; /* 占满容器剩余可用空间 */
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 可选：超出部分显示省略号，不需要可删除此行 */
  min-width: 0; /* 关键：确保弹性子项在空间不足时能正常收缩，避免撑开容器 */
}

原理：flex:1让title自动填充row container中除复选框和details外的剩余空间，min-width:0解决弹性布局中子项内容过长导致容器被撑开的问题，再通过white-space、overflow等属性处理文本溢出。

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