为何contenteditable div中的文本会溢出？

针对contenteditable div中文本超出容器范围的问题，结合你提供的CSS样式，可尝试以下几种方案：

方案1：添加文本换行与溢出控制 #

给.mydiv添加基础排版样式，强制文本在容器内自动换行：

.mydiv {
  font-family: "Black Hairline Italic";
  font-feature-settings: "ss16";
  white-space: pre-wrap; /* 保留换行逻辑，同时自动折行 */
  word-wrap: break-word; /* 对长单词/连续字符强制换行 */
  overflow-wrap: break-word; /* 兼容现代浏览器的换行规则 */
}

方案2：修正字体特性导致的宽度计算偏差 #

部分字体的font-feature-settings会改变字符渲染宽度，导致浏览器计算容器范围时出现偏差。可先临时移除font-feature-settings: "ss16"验证是否为该特性引发问题；若确认是此原因，添加text-rendering优化渲染计算：

.mydiv {
  font-family: "Black Hairline Italic";
  font-feature-settings: "ss16";
  text-rendering: optimizeLegibility;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

方案3：固定容器宽度并启用滚动（可选） #

若需保留文本不换行但避免溢出，可给容器设置固定宽度并开启横向滚动：

.mydiv {
  font-family: "Black Hairline Italic";
  font-feature-settings: "ss16";
  width: 100%; /* 或指定固定值如300px */
  overflow-x: auto; /* 显示横向滚动条 */
  white-space: nowrap; /* 禁止文本换行 */
}

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