是否可以检测到文本换行的位置？
Lorem ipsum dolor sit amet
可以说上面的文字在“dolor”字之后换行。如何检测到它并在那里插入一些标记，Lorem ipsum dolor<div class='wrap-mark'/> sit amet例如？
问问题
481 次
2 回答
6
我已经看到这个问题以几种不同的方式解决了。我的最爱之一是创建一个 div，该 div 反映了包含文本的容器的宽度。然后，您将内容中的单词一个接一个地打印到人造容器中，并沿途测量容器的高度。当容器的高度发生变化时，你知道你有一个换行/换行。
Facebook 和其他一些 CMS 使用这样的方法来扩展他们的文本区域以适应用户输入的内容。我相信您也可以通过研究这些技术来收集更多创造性的方法来衡量您的文本。
于 2013-07-05T19:49:06.537 回答
-1
使用软连字符实体来标记换行位置，加上不间断空格实体来分隔没有空格的单词。对于 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>
参考
于 2013-07-04T01:41:16.883 回答