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

标签 javascript browser word-wrap

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

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

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

最佳答案

您真正想要的不一定是在每行开头的流式文本中插入“>”。您真正想要的是给定 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/)。

关于javascript - 我可以在 JavaScript 中使用浏览器的自动换行吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3050378/

相关文章:

javascript - 我希望用户在我的 &lt;textarea&gt; 中看到换行符而不是 <br>

javascript - Internet Explorer 不会读取对象属性

javascript - 如果没有互联网,打印时中止 Google Analytics

javascript - 离开网页时发出警报

wpf - 键入时组合框换行

css - 围绕 float 元素绝对定位?

javascript - 在 Chrome 扩展程序中获取当前页面 SSL 证书的指纹

javascript - 下载图片或单击按钮显示图片的保存弹出窗口

javascript - 从数组中删除所有具有特征 X 的元素,最新的除外

html - 仅根据最大宽度将内容包装在绝对 div 中