5

这是很多要阅读的内容，但是如果您全部阅读，它应该是有道理的。

我正在开发一个要求用户在 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

这将输出为

你好，这是一个段落和

它继续到下一行，这一行将继续并被父级的设置宽度包裹

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

双空格元素将像上面那样起作用，而单空格元素将简单地将内容移动到下一行。所以，这让我想到了我的实际问题：

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

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

有几件事我试图让它发挥作用。width我可以计算容器的宽度和文本占用的宽度，然后将两者相减，得到剩余空间的宽度，而不是将单个空格元素的 设置为100%像我对双空格元素所做的那样。这将允许我将内容推送到新行。

你可以在这里测试这个方法：http: //jsfiddle.net/charlescarver/ksvkk/12/

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

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

4

2 回答 2

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

于 2013-05-26T23:45:11.300 回答
0

对于您不希望出现分节符的地方，而不是这样：

.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 上选择单个字符并不难。将手指放在文本上会出现一个放大镜，可以细粒度地选择文本。除非我在这里误解了这个问题.)

于 2013-05-26T04:45:48.707 回答