草庐IT

javascript - 内联换行符？

coder 2023-08-12 原文

需要阅读的内容很多，但如果您全部阅读，它应该是有意义的。

我正在开发一款要求用户在 iOS 上突出显示文本的应用。文本分为段落，有换行符和段落符，我决定只使用 <br />换行符的标签，并开始一个新的 p每个段落的元素。 Mobile Safari 的问题在于，当您选择的元素不是内联时，您无法单独选择字母。相反，尝试突出显示文本会突出显示段落的整个 block ，因为它是显示 block ..

为了解决这个问题，我决定用像这样的内联元素替换所有换行符 ( \n):

.space{
    height:0px;
    display:inline-block;
    width:100%;
}

所以 HTML 看起来像:

Line one
<span class="space"></span>
Line two

并且会输出为:

Line One

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

输出为

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

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

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

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

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

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

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

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

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

最佳答案

这似乎为内联中断提供了解决方案: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>

在这个例子中，只有文本被选中，而不是整个 block 。我没有在 iPhone 上测试过，但提供它以防万一，因为这是一个有趣的问题。

关于javascript - 内联换行符？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16754375/

换行符内联codejavascriptjqueryhtmlioscss

有关javascript - 内联换行符？的更多相关文章

  1. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  2. ruby - 代码块中的 Markdown 换行符 - 2

    使用Redcarpet，当我在Markdown中包含类似以下内容时，它不考虑任何换行符或缩进。我在行尾尝试了两个空格。代码之间的额外行。似乎没有任何效果。```xml3```我明白了:3这里是Redcarpet设置:Redcarpet::Markdown.new(Redcarpet::Render::HTML,:autolink=>true,:space_after_headers=>true,:fenced_code_blocks=>true,:no_intra_emphasis=>true,:lax_html_blocks=>true)我需要做什么才能正确换行并保留缩进，就像这里或

  3. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  4. Ruby 无法检测字符串中的换行符 - 2

    我有以下字符串，我想检测那里的换行符。但是Ruby的字符串方法include?检测不到它。我正在运行Ruby1.9.2p290。我哪里出错了？"/'ædres/\nYour".include?('\n')=>false 最佳答案 \n需要在双引号内，否则无法转义。>>"\n".include?'\n'=>false>>"\n".include?"\n"=>true 关于Ruby无法检测字符串中的换行符，我们在StackOverflow上找到一个类似的问题： h

  5. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  6. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  7. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

    出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

  8. ruby-on-rails - 带有内联附件的 Rails 邮件程序错误 - 2

    我在ActionMailer中有一个非常罕见的行为，我在5个月前实现了一个邮件程序操作并且它工作正常，但昨天，由于一些奇怪的原因，它崩溃了。问题我有一个邮件布局，为了在我所有的电子邮件中使用它，我在其中渲染了一张之前由前置过滤器附加的图像Layout=app/views/layouts/email.html.erbVisionamos>......用户邮件程序=app/mailers/users.rbclassUsuariosMailer"monitoreo@visionamos.com"layout"mail"#Setemaillayoutbefore_filter:add_inli

  9. ruby - 换行位置 - 2

    给定一个字符串，返回字符串中换行符开头的字符位置数组的最有效方法是什么？text=预期:find_newlines(text)#=>[0,80,155,233,313,393]我发布我自己的答案。我愿意接受最快的方式作为接受的答案。此处的基准测试结果将在添加新答案时更新require"fruity"comparedopadde1{find_newlines_padde1(text)}digitalross1{find_newlines_digitalross1(text)}sawa1{find_newlines1(text)}sawa2{find_newlines2(text)}end

  10. ruby - Ruby 中有条件的内联和有条件的 block 之间的区别 - 2

    今天我遇到了Ruby的内联if和阻塞if这种奇怪的行为2.0.0-p247:001>inline_if='valuewillnotsetbutnoerror'ifinline_if=>nil2.0.0-p247:002>ifblock_if2.0.0-p247:003?>block_if='forgetaboutsettingvalue,Iwillraiseanerror'2.0.0-p247:004?>endNameError:undefinedlocalvariableormethod`block_if'formain:Objectfrom(irb):2from/Users/myu

随机推荐