内联换行符？(Inline line breaks?)

 这是很多需要阅读的内容，但如果你全部阅读，这应该是有道理的。 
 
 我正在研究一个需要用户在iOS上突出显示文本的应用程序。 文本被分成段落，换行符和段落符号，并且我决定只使用<br />标签作为换行符，并为每个段落启动一个新的p元素。 移动Safari的问题在于，如果您选择的元素不是内嵌的，则无法单独选择字母。 相反，试图突出显示文本会突出显示该段的整个块，因为它显示的是块。 
 
 为了解决这个问题，我决定用一个内联元素替换所有换行符（ \n ），如下所示： 
 
.space{
    height:0px;
    display:inline-block;
    width:100%;
}
 
 所以HTML看起来像： 
 
Line one
<span class="space"></span>
Line two
 
 并输出为： 
 
 
 
 第一行 
 
 
 第二行 
 
 
 我想，“干得好，你明白了！” 
 
 
 跳到今天，我发现这不是我想要的行为。 由于用户突出显示的文本来自处理为纯文本的PDF文件，因此会出现如下情况： 
 
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
 
 我将如何处理 
 
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
 
 这会输出为 
 
 
 
 你好，这是一段和 
 
 
 它将继续到下一行，并且此行将继续并由父级的设置宽度包装 
 
 
 这显然不好！ 现在有一个全新的“段落中断”，应该有一个“换行”。 所以，我想我会做两个不同的内联“休息”类，一个用于单个空间，另一个用于双空间。 
 
 双重空间元素将充当上面那个，而单个空间元素只是将内容移动到下一行。 所以，这让我想起了我的实际问题： 
 
 如何使用内联定位元素将文本移动到下一行？ 
 
 另外，我不能将文本包裹在另一个元素中，例如span ，所以我只能使用CSS来制作内联换行元素和段落元素。 
 
 
 有几件事我试图让它起作用。 与其将单个空间元素的width设置为100%就像我使用双空格元素那样），我可以改为计算容器的宽度和文本占用的宽度，然后减去两个元素的宽度剩余空间。 这将使我能够将内容推向新的界限。 
 
 你可以在这里测试这个方法： http : //jsfiddle.net/charlescarver/ksvkk/12/ 
 
 这种方法的问题是，虽然我可以确定宽度，但我无法确定它是否适用于多行文本节点。 另外，如果容器大小发生变化，这不是很灵活。 
 
 我有一个可能的想法，但无法实现，就是让单个空间元素具有100% width ，并且将文本推入，以便将新行压入下一行。 就像我说的，我无法让它工作。 

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: 
 
How can I move text onto the next line using an inline-positioned element?
 
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.

原文：https://stackoverflow.com/questions/16754375