内联换行符？
Posted
技术标签:
【中文标题】内联换行符？【英文标题】：Inline line breaks? 【发布时间】：2013-05-25 22:13:28 【问题描述】：这篇文章有很多要读的，但如果你都读完了，它应该是有意义的。
我正在开发一款要求用户在 ios 上突出显示文本的应用。文本被分成段落，带有换行符和分段符，我决定只使用<br /> 标记作为换行符，并为每个段落开始一个新的p 元素。 Mobile Safari 的问题是当您选择的元素是not 内联时，您无法单独选择字母。相反，尝试突出显示文本会突出显示段落的整个块，因为它被显示为块..
为了解决这个问题，我决定将所有换行符 (\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，并让文本推动它，以便它将换行向下推到下一行。就像我说的那样，我无法让它发挥作用。
【问题讨论】：
有趣的问题，现在没时间深入研究，但也许明天我会有机会。 @NielsKeurentjes 太棒了。我觉得只需要正确的样式组合即可。 但是，如果您只是使用<pre> 标记文本呢？或white-space: pre; 用于<div> 块？像这样：jsfiddle.net/ksvkk/13。它显然不需要你用额外的元素替换新行，并且会让你的标记更清晰。
不。已经试过了：***.com/questions/15488751/…
Mobile Safari 的问题是，当您选择的元素不是内联时，您无法单独选择字母。 这并不完全正确——您只需要放大（然后它会让您突出显示单个字母）。此外，您正在尝试与操作系统的本机行为作斗争；这是一项西西弗斯式的任务。
【参考方案1】：
这似乎为内联中断提供了解决方案：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>
在此示例中，仅选择了文本，而不是整个块。我没有在 iPhone 上进行过测试，但提供它以防万一，因为这是一个有趣的问题。
【讨论】：
我将对此进行进一步测试，但到目前为止看起来很有希望。【参考方案2】：对于您不希望出现分节符的地方，而不是这样：
.doublespace
height:0px;
display:inline-block;
width:100%;
你不能这样做吗？ （即将inline-block切换到block）：
.singlespace
height: 0px;
display: block;
width: 100%;
完整示例：http://codepen.io/pageaffairs/pen/koxlw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.singlespace
height:0;
display:block;
width:100%;
.doublespace
height:0;
display:inline-block;
width:100%;
</style>
</head>
<body>
<p>Hello there, this is a paragraph and
<span class="singlespace"></span>
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>
======================
（不过，正如 cmets 中所述，在 iPhone 上选择单个字符并不难。将手指放在文本上会出现放大镜，可以细粒度地选择文本。除非我误解了这里的问题。）
【讨论】：
我认为您误解了这个问题：Mobile Safari 的问题是当您选择的元素不是内联时，您无法单独选择字母。相反，尝试突出显示文本会突出显示段落的整个块 […]。当您将手指放在块元素上时，您不会看到放大镜——它只会自动选择整个“块”（这非常令人沮丧）。 嗯，这当然不是我的经验。如果我按下段落中的一个单词，放大镜会弹出并选择我按下的单词，我可以扩大或缩小该选择。对不起，如果我仍然误解。无论如何，上面代码中的任何cmets？ @ralph.m 雅各布是正确的。如果我使用您的方法，我还不如使用<br /> 元素将文本发送到下一行。在您的示例中，如果您尝试在第一段中选择一个单词，您可以这样做直到到达块元素。然后，iOS 会选择整个块元素，这意味着您不能继续选择下一段中的单个字母。以下是您的示例在以下情况下的工作方式：a.) 尝试选择 .singlespace 元素上方的文本：i.imgur.com/41EflxR.png 和 b.) 选择 .doublespace 元素周围的文本 i.imgur.com/zz5OO15.png
好的，我以为你说 元素不起作用，但中间的另一个元素起作用了。哦，好吧。以上是关于内联换行符？的主要内容，如果未能解决你的问题，请参考以下文章