为每个字符设置字母间距 Html Css答案

【问题标题】：Set Letter Spacing for each character Html Css为每个字符设置字母间距 Html Css
【发布时间】：2021-09-18 15:48:33
【问题描述】：

当用户在文本框中输入时，我想为每个不同大小的字符设置字母间距。我尝试在 css 中使用字母间距，但它改变了所有相同大小的字符。有没有办法做到这一点？

这是我的代码

<!DOCTYPE html>
<html>
  <head>
   <meta name='viewport' content='initial-scale=1.0' />
    <style>.pr { letter-spacing: 10px; }</style>
    </head>
     <body>
       <div id='editor' contenteditable='true' style='white-space: pre-line;'><pr></pr>
       </div>
     </body>
</html>

【问题讨论】：

如果我们忘记了 Shaheryar 的回答，唯一的方法是为每个字符创建一个元素（例如 span），然后使用 CSS 设置跨度的左/右填充。
@Teemu 用户输入时如何设置？
这太宽泛了，如果没有您自己的代码就无法回答。一般来说，在编辑器上收听keydown（input 也可以这样做），并覆盖默认操作。使用Range API 或execCommand 插入新跨度。
@Teemu 请给我一个演示，我只是初学者，只是跨越网络语言
如果做得好，创建这样的功能并不是一件容易的事，这是一项相当大的工作。您必须根据给定的建议开始实施该功能，然后如果您遇到困难，请就您面临的问题提出问题。

标签： javascript html css ios web

【解决方案1】：

使用&nbsp; 在 HTML 中标记之间的额外空格。

<div id='editor' contenteditable='true'>&nbsp;&nbsp;&nbsp;</div>

【讨论】：

这是一个糟糕的解决方案，但它有效，但有点粗糙。
我不明白。当用户输入如何设置它时。