内联换行符？答案

【问题标题】：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。它显然不需要你用额外的元素替换新行，并且会让你的标记更清晰。
不。已经试过了：stackoverflow.com/questions/15488751/…
Mobile Safari 的问题是，当您选择的元素不是内联时，您无法单独选择字母。 这并不完全正确——您只需要放大（然后它会让您突出显示单个字母）。此外，您正在尝试与操作系统的本机行为作斗争；这是一项西西弗斯式的任务。

标签： javascript jquery html ios css

【解决方案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='&#xa;'></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
好的，我以为你说
元素不起作用，但中间的另一个元素起作用了。哦，好吧。