我可以使用JavaScript中的浏览器自动换行吗？ [英] Can I use the browser's word-wrapping from JavaScript?

问题描述

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

I have some text in a div. It can be any Unicode text under the sun, including Chinese, Japanese, and Korean. Now, I need to take this text and word-wrap it in JavaScript in some efficient but correct manner. Then I need to insert a ">" at the start of every line, and put the resulting text into a textarea.

浏览器具有Unicode Word Wrap算法的实现正如在CSS中使用自动换行的Unicode文本所证明的那样。 （至少，Firefox有这样的算法，我怀疑其他浏览器也这样做。）我需要的是JavaScript使用相同的自动换行算法的一些方法，这样我就可以正确地换行然后引用Unicode文本。

Browsers have an implementation of the Unicode Word Wrap algorithm, as is evidenced by word-wrapping Unicode text in a with CSS. (At least, Firefox has such an algorithm, and I suspect other browsers do as well.) What I need is some way for JavaScript to use the same word-wrapping algorithm, so that I can properly wrap and then "quote" Unicode text.

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

Is there any way for JavaScript to use the browser's word-wrapping algorithm, or to know where text has been line-broken in a div or any other element?

推荐答案

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

What you really want isn't necessarily to insert ">" in the flowed text at the beginning of every line. What you really want is for every line in a given block to have a ">" at the left of it.

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

You could potentially do the latter by:

1）创建>字符的图像，从顶部到底部的高度相当于您计划使用的CSS line-height 值。将该图像作为背景应用于要插入的文本的容器中。让它垂直重复，但不是水平重复。将容器填充为字符/图像的宽度。

1) Creating an image of the ">" character, with its height from top to bottom equivalent to the CSS line-height value you plan on using. Apply that image as a background on the container of the text you want this "inserted" into. Have it repeat vertically, but not horizontally. Pad the container the width of the character/image.

2）让一些javascript获取行高的计算值您正在使用的容器的属性。然后，假设您没有人为地设置此容器的高度，容器中文本的行数是 offsetHeight 除以计算的行高。此时，创建一个单独的容器，其中只有>的内容作为其内容。将其放置在内容容器的左边缘。

2) Have some javascript get the computed value of the line-height property for the container you're working with. Then, assuming you're not artificially setting the height of this container, the number of "lines" of text in the container is its offsetHeight divided by the computed line-height. At this point, create a separate container that has nothing but that number of >'s as its content. Position it to the left edge of your content container.

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

Your larger question about whether you have access to the text-flow algorithm the browser uses via JavaScript is an interesting one, but I'm pretty sure the answer is no. However, as more developers start playing with the Canvas element, people are writing their own (Canvas has text drawing, but not its own flow-layout algorithm for text). You might want to see what the Bespin guys did (https://bespin.mozillalabs.com/ - it's a text editor implemented using the Canvas) or check out the source of some of the sandbag/image textwrapping javascript libraries like jQSlickWrap (http://jwf.us/projects/jQSlickWrap/ ).

这篇关于我可以使用JavaScript中的浏览器自动换行吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！