Is It Possible To Detect When Text Wraps?
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
Solution 1:
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.
Solution 2:
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<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet<spanclass="fake-space">­</span>ipsum<spanclass="fake-space">­</span>dolor<spanclass="fake-space">­</span>sit<spanclass="fake-space">­</span>amet</p></body></html>References
Post a Comment for "Is It Possible To Detect When Text Wraps?"