JS文本换行算法-模拟计算文字换行位置-基于DOM元素自发换行行为和字符分割原理-支持实体编码、不支持标签嵌套和富文本-CSDN博客

本文链接：https://blog.csdn.net/qq_26909801/article/details/97298710

本文介绍了如何使用JavaScript模拟计算HTML文本换行位置，详细解析了换行原理、相关因素和解决方案，包括处理CJK字符的特殊情况。通过创建DOM元素并应用样式，分析innerText，最终实现换行插入。

摘要由CSDN通过智能技术生成

简介

之前在学习HTML的时候一直很想弄清楚HTML内部换行的逻辑，特别是有时候我们想知道一个字符串放入一个DOM元素之后究竟在哪个字符位发生的换行，然后就可以知道在一个固定宽高且隐藏溢出的容器中当前用户看见的字符到底有多少个，具体是哪几个等。然而，原生的HTML并没有提供这个功能，所以就要自己写算法来实现咯。

1.原理解析

1.1 常见HTML换行效果

想要模拟HTML的换行的话，首先要对HTML自发换行的原理有一些了解，在我所学的知识中，HTML的换行逻辑是这样的。对于一个标签内文字的渲染如：

<div style="width: 200px;border: 1px solid #000;">
    1 3&nbsp;sad中文       12o3iaslkdjaksldj aslkdj alskdjklsj    这是一段测试文字，没有什么实际含义。 no sense! 
    123  
</div>

渲染出来的效果是这样的：
html

1.2文本换行相关的因素

简单分析一下html处理换行的逻辑：
首先，截止20190725，HTML中DOM元素内文本换行的逻辑主要和以下几个方面有关：

容器的宽度width;
文本的样式，如font-size等;
容器的空白符处理逻辑，主要是看标签容器的white-space属性;
容器的单词截断逻辑，主要是看标签容器的word-wrap(或叫overflow-wrap)和word-break属性;
关于,white-space,word-wrap,word-break这三个属性，大家可以参考下面的文字文章，或自己去实验看看。
作者：杭电茶娃，链接：https://blog.csdn.net/c11073138/article/details/79534394 ，标题如下：
常见样式问题七、word-break、word-wrap、white-space区别

1.3HTML换行原理简单分析

一个html标签，如上面1.1中的div，文本换行的时候其实做了如下的操作：
1.取出标签中间的文字存入字符串，去掉首尾空格;
2.根据white-space的空白符逻辑完成空白符替换;
3.根据word-break和word-wrap进行单字或单词分割。
4.渲染出div的宽高和文字的样式，往容器中填充文字，当文字宽度溢出时进行换行。
5.一些额外的细节处理，这里就不说了，大家可以多去实验观察一下，我也是实验试出来的。

1.4我的解决方案

要求外部传入一个字符串str，和需要模拟的容器的样式styles，自动在模拟换行的位置插入\n。具体操作如下：
1.创建一个div容器，将styles样式设置到div上，将str作为div的innerHTML。
2.获取div的innerText作为空白符处理的结果（innerText是innerHTML解析并按照white-space进行空白符替换的结果）
3.对innerText进行分割