11

Is it possible to detect where text wraps?

Lorem ipsum dolor sit amet

lets say that above text wraps after 'dolor' word. How to detect that and insert there some mark of it so it would be Lorem ipsum dolor<div class='wrap-mark'/> sit amet for example?

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
user1785870
  • 477
  • 1
  • 6
  • 16
  • yep, miss spelling, i will edit – user1785870 Nov 29 '12 at 14:53
  • You might look [**here**](http://james.padolsey.com/javascript/wordwrap-for-javascript/) – SpYk3HH Nov 29 '12 at 14:54
  • i need to detect place when it is wrapped, not to wrap it. – user1785870 Nov 29 '12 at 14:55
  • It seems about easy to do but the inserted div will change the wrapping position. How do you want to handle that ? – Denys Séguret Nov 29 '12 at 14:56
  • what you want to do with "si amet " do you want to apply another css on it. ? – Bilal lilla Nov 29 '12 at 14:57
  • it may be width:0 div. it may be even
    insted. Just need to mark somehow that place.     – user1785870 Nov 29 '12 at 14:57
  • I need to isolate every wrapped line of text. – user1785870 Nov 29 '12 at 14:59
  • In fact... this isn't so easy. What is easy is to detect what char provokes the reflow but without dangerous guesses it's impossible to know what is the result of the reflow. Maybe you should hint at what is the exact goal (only visual ?) so we could propose a workaround. – Denys Séguret Nov 29 '12 at 15:03
  • 1. mark every line with different background color. 2. limit container width to be as wide as the widest line – user1785870 Nov 29 '12 at 15:17
  • You may have some luck here: http://stackoverflow.com/questions/3738490/finding-line-wraps – DanielCW Nov 29 '12 at 15:20
  • No, it's not possible, unless you essentially write your own line-breaking logic in JS. –  Jul 04 '13 at 04:12
  • You can put ­ at every place within a word where it could break and it will show the `-` at every place where it actually wraps the word. The code gets messy quickly tho. (http://en.wikipedia.org/wiki/Soft_hyphen) – Sumurai8 Jul 05 '13 at 17:45
  • Not a solution, just a suggestion. http://fittextjs.com/ where a javascript figure out what space there is in order to ajust the font-size. With this javascript, you might be able to figure out how they calculate the space difference between the 'text lenght' and the available container width. – Milche Patern Jul 05 '13 at 17:48
  • I wrote a couple JSFiddles a while back. Maybe you can adapt them to a solution: http://jsfiddle.net/Paulpro/vS58E/ (Replaces too long of text with an ellipsis) and http://jsfiddle.net/Paulpro/adpBM/ (Automatically increase the size of an input element to hold it's contents). – Paul Jul 05 '13 at 19:56
  • depending on your required support you could use a canvas with context.measureText to figure out where in the text you would precisely need to input the new element. It might be overkill, but it was my first thought. – rlemon Jul 05 '13 at 20:16

2 Answers2

5

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.

Daniel Szabo
  • 7,181
  • 6
  • 48
  • 65
-1

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

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
  • 6
    Well, this is not going to work, because he wants to insert the snippet WHEREVER the break happens to occur. –  Jul 04 '13 at 04:10
  • A creative solution, but it would seem that (1) the soft hyphen will be displayed when a break occurs there, and (2) there's no way to meet the OP's requirement to " insert there some mark". –  Jul 05 '13 at 19:50
  • (1) does (2), so (1) is (2). – Paul Sweatte Jul 05 '13 at 20:03
  • the OP asked if he can insert an element at the line break. This solution may be suitable, however until there is further clarification on that fact he may still want to insert an actual element there. – rlemon Jul 05 '13 at 20:23