Is it possible to detect when text wraps?

橙三吉。 提交于 2019-12-03 02:43:28

I've seen this problem solved a few different ways. One of my favorites involves creating a div that mirrors the width of the container that holds your text. You then print words of your content into faux-container one-by-one, measuring the height of the container along the way. When the height of the container changes, you know you have a line feed/wrap.

Facebook and a few other CMS's use a method like this to grow their textareas to fit the contents of a user's input. I'm sure you could probably glean a few more creative ways to measure your text by researching those techniques, too.

Use the soft-hyphen entity to mark the wrapping position, plus the non-breaking-space entity to separate words without whitespace. The non-breaking space needs to come before the soft hyphen for IE10. Here is an example:

Here is a cross-browser solution:

<!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>

References

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!