代码之家 › 专栏 › 技术社区 › Max Kanat-Alexander

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

word-wrap browser javascript

Max Kanat-Alexander · 技术社区 · 15 年前

我在div中有一些文本。它可以是太阳下的任何Unicode文本,包括中文、日文和韩文。现在,我需要以一种高效但正确的方式将这个文本用JavaScript进行文字包装。然后我需要插入一个“>”在每行的开头,将生成的文本放入文本区域。

浏览器有一个Unicode换行算法的实现,用CSS将Unicode文本换行就是明证。(至少Firefox有这样的算法,我怀疑其他浏览器也有。)我需要的是让JavaScript使用相同的单词包装算法,这样我就可以正确包装然后“引用”Unicode文本。

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

1 回复 | 直到 15 年前

Weston C 15 年前

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

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

1) 创建“>”的图像字符,其从上到下的高度相当于CSS line-height 你计划使用的价值。将该图像作为背景应用到要“插入”的文本容器中。让它垂直重复,但不要水平重复。在容器中填充字符/图像的宽度。

2) 让一些javascript获取 线条高度 您正在使用的容器的属性。然后,假设您没有人为地设置这个容器的高度,那么容器中文本的“行”数就是它的长度 offsetHeight 除以计算出的线高度。此时,创建一个单独的容器,该容器只有该数量的>'这是它的内容。将其放置在内容容器的左边缘。

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

推荐文章

DiscreteTom · JavaScript structuredClone在Chrome/Edge中获得了“非法调用”,但在NodeJS中没有

2 年前

Ish Mahajan · WebTransport的浏览器兼容性

2 年前

Lixin Wei · 为什么WebRTC可以在未经我许可的情况下获取我的本地IPv6地址?

2 年前

Václav Procházka · 动态创建获取和解析脚本的顺序

2 年前

jani · 检查安装了哪些浏览器,然后在其桌面上创建快捷方式

2 年前

Italy Zia · 我收到一个“拒绝执行来自的脚本”http://localhost:3000/js/dashboard/dashboard.js',因为其MIME类型('text/plain')不可执行

2 年前

kakakali · 为什么appendChild()会丢失一些子项?

2 年前

Djaro · 人们在我的标签上按下shift,但在另一个标签上释放它。如何防止Ctrl+Shift+Tab破坏我的“Shift_pressed”变量?

2 年前

StuartN · 使用默认搜索引擎的HTML搜索链接

2 年前

Vindicated · 如何访问当前未连接到的URL的本地存储?

2 年前