是否可以检测文本的包装位置？
Lorem ipsum dolor坐着
让我们说上面的文字包裹在'dolor'之后 . 如何检测并插入一些标记，例如 Lorem ipsum dolor<div class='wrap-mark'/> sit amet ？
Lorem ipsum dolor<div class='wrap-mark'/> sit amet
我已经看到这个问题解决了几种不同的方式 . 我最喜欢的一个涉及创建一个div，它反映了容纳文本的容器的宽度 . 然后，将您的内容的单词逐个打印到人造容器中，沿途测量容器的高度 . 当容器的高度发生变化时，您知道有换行/换行 .
Facebook和其他一些CMS使用这样的方法来增加textareas以适应用户输入的内容 . 我相信你也可以通过研究这些技术来收集一些更有创意的方法来衡量你的文本 .
使用soft-hyphen实体标记包装位置，使用非break-space实体来分隔没有空格的单词 . 不间断的空间需要在IE10的软连字符之前出现 . 这是一个例子：
这是一个跨浏览器的解决方案：
<!doctype html> <html> <head> <title>Soft Hyphen Text Wrapping</title> <style> /* Generate space after each soft hyphen */ .fake-space:after { content: "\00a0"; } @media all and (-ms-high-contrast: none) { /* Generate space before each soft hyphen for IE10 */ .fake-space:before { content: "\00a0"; } .fake-space:after { content: ""; } } </style> </head> <body> <!--Paragraph with words separated by soft hypen entity wrapped in a span--> <p>Lorem<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet</p> </body> </html>
References
Yes, SOFT HYPHEN is a hard problem
Unicode Line Breaking Algorithm
The WBR tag
Soft Hyphen - A Hard Problem?
No-wrapping and Softwrapping: with NOBR, WBR and
nobr and wbr
Suggested Word Break
The WBR Element
2 回答
我已经看到这个问题解决了几种不同的方式 . 我最喜欢的一个涉及创建一个div，它反映了容纳文本的容器的宽度 . 然后，将您的内容的单词逐个打印到人造容器中，沿途测量容器的高度 . 当容器的高度发生变化时，您知道有换行/换行 .
Facebook和其他一些CMS使用这样的方法来增加textareas以适应用户输入的内容 . 我相信你也可以通过研究这些技术来收集一些更有创意的方法来衡量你的文本 .
使用soft-hyphen实体标记包装位置，使用非break-space实体来分隔没有空格的单词 . 不间断的空间需要在IE10的软连字符之前出现 . 这是一个例子：
这是一个跨浏览器的解决方案：
References
Yes, SOFT HYPHEN is a hard problem
Unicode Line Breaking Algorithm
The WBR tag
Soft Hyphen - A Hard Problem?
No-wrapping and Softwrapping: with NOBR, WBR and
nobr and wbr
Suggested Word Break
The WBR Element