javascript - 我可以在 JavaScript 中使用浏览器的自动换行吗？

Question

我在一个 div 中有一些文本。可以是天底下的任何Unicode文本，包括中文、日文、韩文。现在，我需要使用 JavaScript 以某种有效但正确的方式对这段文本进行自动换行。然后我需要在每一行的开头插入一个“>”，并将生成的文本放入文本区域。

浏览器实现了 Unicode Word Wrap 算法，在 CSS 中对 Unicode 文本进行自动换行就证明了这一点。 (至少，Firefox 有这样的算法，我怀疑其他浏览器也有。)我需要的是某种方式让 JavaScript 使用相同的自动换行算法，这样我就可以正确换行然后“引用”Unicode 文本.

JavaScript 是否有任何方法可以使用浏览器的自动换行算法，或者知道文本在 div 或任何其他元素中的何处换行？

Answer 1

您真正想要的不一定是在每行开头的流式文本中插入“>”。您真正想要的是给定 block 中的每一行在其左侧都有一个“>”。

您可以通过以下方式实现后者:

1) 创建“>”字符的图像，其从上到下的高度等于您计划使用的 CSS line-height 值。将该图像作为背景应用到您希望将其“插入”到的文本容器中。让它垂直重复，而不是水平重复。将容器填充字符/图像的宽度。

2) 让一些 javascript 获取您正在使用的容器的 line-height 属性的计算值。然后，假设您没有人为设置此容器的高度，则容器中文本的“行”数是其 offsetHeight 除以计算出的行高。在这一点上，创建一个单独的容器，其中只有该数量的 > 作为其内容。将它放在内容容器的左边缘。

关于您是否有权访问浏览器通过 JavaScript 使用的文本流算法的更大问题是一个有趣的问题，但我很确定答案是否定的。然而，随着越来越多的开发人员开始使用 Canvas 元素，人们开始编写自己的元素(Canvas 有文本绘制，但没有自己的文本流布局算法)。您可能想看看 Bespin 的家伙做了什么(https://bespin.mozillalabs.com/ - 这是一个使用 Canvas 实现的文本编辑器)或查看一些沙袋/图像文本环绕 javascript 库的源代码，例如 jQSlickWrap(http://jwf.us/projects/jQSlickWrap/)。