是否可以检测文本的包装位置？
Lorem ipsum dolor sit amet
让我们说上面的文字包含在'dolor'字之后。如何检测并插入一些标记，例如Lorem ipsum dolor<div class='wrap-mark'/> sit amet？
答案 0 :(得分：5)
我看到这个问题解决了几种不同的方式。我最喜欢的一个涉及创建一个div，它反映了容纳文本的容器的宽度。然后，将您的内容的单词逐个打印到人造容器中，沿途测量容器的高度。当容器的高度发生变化时，您知道有换行/换行。
Facebook和其他一些CMS使用这样的方法来增长textareas以适应用户输入的内容。我相信你也可以通过研究这些技术来收集一些更有创意的方法来衡量你的文本。
答案 1 :(得分：-1)
使用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>
参考文献