是否有可能当文本换行到检测?(Is it possible to detect when text

2019-08-03 08:22发布

是否有可能以检测文本换行?

Lorem存有胡萝卜

可以说,上述文字后“悲”字包装。 如何检测并插入那里它的一些标记所以这将是Lorem ipsum dolor<div class='wrap-mark'/> sit amet例如?

Answer 1:

我已经看到了这个问题就迎刃而解了几种不同的方式。 我的最爱之一涉及创建镜像保存您的文本容器的宽度股利。 然后,您打印的内容的话到人造容器一个接一个,测量沿途的容器的高度。 当容器的高度变化,你知道你有一个换行/换行。

Facebook和其他一些CMS的使用这样的方法来发展自己的文字区域,以适应用户的输入的内容。 我敢肯定,你也许可以搜集一些更有创意的方式通过研究这些技术来衡量你的文字了。



Answer 2:

使用软连字符实体标记包裹位置,再加上非换空间的实体,没有空格分隔单词。 非打破空间需要来自动连为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">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet<span class="fake-space">&shy;</span>ipsum<span class="fake-space">&shy;</span>dolor<span class="fake-space">&shy;</span>sit<span class="fake-space">&shy;</span>amet</p>
</body>
</html>

参考

  • 是的,软连字符是一个很难的问题
  • Unicode换行算法
  • 该WBR标签
  • 软连字符-一个很难的问题?
  • 无包装和Softwrapping:与NOBR,WBR和与害羞;
  • NOBR和WBR
  • 提示词歇
  • 该WBR元素


文章来源: Is it possible to detect when text wraps?