解决contenteditable编辑器回车换行行高异常问题：在线与离线环境差异

本文探讨contenteditable编辑器中，按回车键产生换行符时，在线环境行高异常（实际高度10px，而非预期20px）,而离线环境正常的问题。 该问题并非简单的固定高度就能解决，因为字体大小变化会影响行高。

问题描述:

在contenteditable元素中，按下回车键后，在线环境下每行行高会自动调整为回车符的实际高度(10px)，导致排版错误。然而，同样的操作在离线环境中却能保持预期的20px行高。

解决方案：使用自定义字体覆盖回车符

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

该方案的核心是利用CSS的高优先级，通过自定义字体来替代回车符的默认显示方式。

首先，创建一个包含回车符的自定义字体，并将其嵌入CSS：

<code class="css">@font-face {
  font-family: 'customReturn';
  src: url('data:application/font-woff;charset=utf-8;base64,...'); /*  此处替换为你的base64编码的字体文件 */
  font-weight: normal;
  font-style: normal;
}</code>

然后，使用CSS选择器，在contenteditable元素获得焦点时，强制使用自定义字体：

<code class="css">.contenteditable:focus {
  font-family: 'customReturn', sans-serif;
}</code>

通过此方法，当用户按下回车键时，回车符将被自定义字体中的回车图标替代，从而避免了行高自适应问题，并保持了其他文本的预期行高。 其他文本将使用sans-serif字体。 请注意替换data:application/font-woff;charset=utf-8;base64,... 为你实际的base64编码字体文件。

这个方法巧妙地利用了CSS的优先级，解决了在线环境与离线环境差异导致的行高问题，确保了编辑器在不同环境下的稳定性。