Menu
This is a lot to read, but if you read it all, it should make sense.
I am working on an app that requires users to highlight text on iOS. The text is separated into paragraphs, with line breaks and paragraph breaks, and I decided I would simply use <br /> tags for the line breaks, and start a new p element for each paragraph. The problem with Mobile Safari is that you can't individually select letters when the element you are selecting from is not inline. Instead, trying to highlight text would highlight the entire chunk of the paragraph, as it was displayed block..
To combat this, I decided I would replace all new-line characters (\n) with an inline element like so:
.space{
height:0px;
display:inline-block;
width:100%;
}
So the HTML would look like:
Line one
<span class="space"></span>
Line two
And would output as:
Line One
Line Two
I thought, "Good job, you figured it out!"
Skip to today, where I found out that this is not the behavior I want. Since the text that the user is highlighting comes from a PDF file which is processed into plain text, there would be occurrences like this:
Hello there, this is a paragraph and\n
it is continuing onto the next line and this line will continue and be wrapped by the set width of the parent
Which I would process as
Hello there, this is a paragraph and
<span class="space"></span>
it is continuing onto the next line and this line will continue and be wrapped by the set width of the parent
Which would output as
Hello there, this is a paragraph and
it is continuing onto the next line and this line will continue and be wrapped by the set width of the parent
That's obviously not good! Now there's a whole new "paragraph-break" where there should be a "line-break". So, I figured I would make two different inline "break" classes, one for a single space, and one for a double space.
The double space element would act as the one above is, while the single space element would simply move the content onto the next line. So, this brings me to my actual question:
Also, I cannot wrap the text in another element, such as span, so I can only use CSS to make an inline line break element and paragraph element.
There are a couple of things that I have tried to get this to work. Instead of setting the width of the single space element to 100% like I do with the double space element, I could instead calculate the width of the container and the width that the text takes up, and subtract the two, getting the width of the remaining space. This would allow me to push the content to the new line.
You can test this method here: http://jsfiddle.net/charlescarver/ksvkk/12/
Problem with this method is that while I could determine the width, I couldn't determine it for multi-line text nodes. Also, this isn't flexible if the container size changes.
A possible idea that I had but couldn't get to work was to have the single space element have a 100% width, and have the text push it so that it would push the newline down to the next line. Like I said, I couldn't get that to work.
340
This seems to offer a solution for an inline break: http://codepen.io/pageaffairs/pen/oliyz
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
[data]:after {
content: attr(data);
white-space: pre;
height: 0;
}
.doublespace{
height:0;
display:inline-block;
width:100%;
}
</style>
</head>
<body>
<p>Hello there, this is a paragraph and <b data='
'></b> it is continuing onto the next line and this line will continue and be wrapped by the set width of the parent</p>
<p>Hello there, this is a paragraph and
<span class="doublespace"></span>
it is continuing onto the next line and this line will continue and be wrapped by the set width of the parent</p>
</body>
</html>
In this example, only text is selected, rather than the whole block. I haven't tested in on an iPhone, but offering it just in case, as it's an interesting question.
104
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
