{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 一纸荒年 Trace。 的问题《Is it possible to detect when text wraps?》','https://www.manongdao.com/q-502241.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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?
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:
References