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

时间:2010-06-16 02:29:53

标签: javascript browser word-wrap

我在div中有一些文字。它可以是阳光下的任何Unicode文本,包括中文,日文和韩文。现在,我需要以一些有效但正确的方式使用此文本并在JavaScript中自动换行。然后我需要插入一个“>”在每一行的开头,将结果文本放入文本区域。

浏览器具有Unicode Word Wrap算法的实现,这可以通过CSS中的自动换行Unicode文本来证明。 (至少,Firefox有这样的算法,我怀疑其他浏览器也这样做。)我需要的是JavaScript使用相同的自动换行算法的一些方法,这样我就可以正确地换行然后“引用”Unicode文本。

JavaScript有没有办法使用浏览器的自动换行算法,或知道文本在div或其他任何元素中的换行位置?

1 个答案:

答案 0 :(得分:2)

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

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

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/