我可以使用浏览器的 JavaScript 自动换行吗？答案

【问题标题】：Can I use the browser's word-wrapping from JavaScript?我可以使用浏览器的 JavaScript 自动换行吗？
【发布时间】：2011-03-04 06:48:56
【问题描述】：

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

浏览器实现了 Unicode 自动换行算法，这可以通过使用 CSS 将 Unicode 文本自动换行来证明。（至少，Firefox 有这样的算法，我怀疑其他浏览器也有。）我需要的是某种方式让 JavaScript 使用相同的自动换行算法，这样我就可以正确换行然后“引用”Unicode 文本.

JavaScript 有没有办法使用浏览器的自动换行算法，或者知道 div 或任何其他元素中的文本在哪里被换行？

【问题讨论】：

一个非常好的和有趣的问题，Max，+1。不幸的是，我知道没有直接的方法来找出 div 中任意文本的自动换行（也取决于用户选择的相对字体大小），但我很想听听建议。

标签： javascript browser word-wrap

【解决方案1】：

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

您可以通过以下方式执行后者：

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/)。

【讨论】：

哇，太聪明了！但是，行高取决于使用的字体，对吧？并且使用的字体在不同平台上的不同浏览器上可能有不同的行高，不是吗？因此，如果用户缩放，或者有人修改了正在使用的字体（这是可能的——这是一个运输应用程序，而不是内部应用程序），它将失败。 FWIW，我确实希望在文本中添加明确的换行符。它需要去带有\n的服务器。
方法 #2 可能会在缩放/字体更改中幸存下来，因为它依赖于计算的东西，但你完全正确的是方法 #1 会非常脆弱。显式换行符...嗯。你知道，这可能是一个重新分配的的工作。查找各种<code>wrap</code> 属性——我认为有一个（<code>hard</code> ？）可以在提交时将软换行转换为文字换行符。将其与技巧 #2 之类的东西结合起来，您可能会拥有它。