Question

这是一个很难阅读，但如果你全部阅读，它应该是有道理的。

我正在开发一款需要用户在iOS上突出显示文字的应用。文本被分成段落，带有换行符和分段符号，我决定只使用<br />标记换行，并为每个段落开始一个新的p元素。 Mobile 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

哪个输出为

你好，这是一个段落和

它继续到下一行，这一行将继续并由父
的设定宽度包裹

这显然不好！现在有一个全新的“段落”，应该有一个“突破”。所以，我想我会创建两个不同的内联“break”类，一个用于单个空格，一个用于双空格。

双空格元素将作为上面的元素，而单个空格元素只是将内容移动到下一行。所以，这让我想到了我的实际问题：

如何使用内联定位元素将文本移动到下一行？

另外，我无法将文本包装在另一个元素中，例如span，所以我只能使用CSS来制作内联换行元素和段落元素。

有一些事情我试图让它发挥作用。我没有像使用双空格元素那样将单个空格元素的width设置为100%，而是可以计算容器的宽度和文本占用的宽度，然后减去二，获得剩余空间的宽度。这将允许我将内容推送到新行。

您可以在此处测试此方法：http://jsfiddle.net/charlescarver/ksvkk/12/

这种方法的问题在于，虽然我可以确定宽度，但我无法确定多行文本节点。此外，如果容器尺寸发生变化，这也不灵活。

我有一个可能的想法但是无法开始工作的是让单个空格元素有一个100% width，并让文本推送它以便它可以推动它换行到下一行。就像我说的那样，我无法让它发挥作用。

Answer 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上测试过，但提供它只是为了以防万一，因为这是一个有趣的问题。

Answer 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>

=====================

（正如评论中所指出的那样，在iPhone上选择单个字符并不难。手指放在文本上会产生一个放大镜，可以对文本进行精细的选择。除非我误解问题在这里。）

内联换行符？

如何使用内联定位元素将文本移动到下一行？

2 个答案: