草庐IT

javascript - 我可以将每一行多行文本包装在一个跨度中吗？

coder 2024-05-08 原文

我一直在试图弄清楚如何做到这一点(如果可能的话)并且画了一个空白......

我有一些文本会换行。我想检测每一行，并将其包装在一个跨度中。最后，我想为循环数组中的每个跨度分配一个类。

例如...!

<div id="quote">
    I have some text that
    wraps onto three lines
    in this container
</div>

我想让我的 jQuery 解析这些行，检测它在哪里换行，然后把它变成这样:

<div id="quote">
    <span class="red-bg">I have some text that</span>
    <span class="orange-bg">wraps onto three lines</span>
    <span class="yellow-bg">in this container</span>
</div>

我想动态地执行此操作的原因是我在响应式模板中执行此操作，因此有时相同的文本只会换行成两行，或者在 iPhone 中可能是四行。

这可行吗？我找到了这个 -> http://vidasp.net/tinydemos/numberOfLines.html它计算一段文本中使用的行数，但这并没有真正扩展到做我需要的。

最佳答案

您似乎在问如何在浏览器自然包裹的位置拆分文本。不幸的是，这根本不是直截了当的。它也不健壮——考虑以下场景:

  • 用户浏览到您的页面，呈现 div 并触发 onload 事件，
  • 从文本节点创建 3 个 span 元素，每个换行文本 1 个，
  • 用户调整浏览器大小，div 的大小发生变化。

结果是跨度不再与线条的开始和结束位置相关。当然，使用固定宽度的元素可以避免这种情况，或者您可以在浏览器调整大小时调整整个元素，但这只是它如何中断的一个示例。

不过，这并不容易。 similar question 之前已经出现(尽管目标不同)并且出现了两个解决方案，它们在这里可能都有帮助:

Solution 1: getClientRects()

实际上不要将文本包裹在 span 中，而是使用 getClientRects() 获取每行文本的位置和尺寸。然后，创建必要的跨度数，并将它们放置在每行文本后面/调整它们的大小。

优点

  • 快速； getClientRects 返回每一行的位置
  • 简单；代码比方案2更优雅

缺点

  • 换行的文本必须包含在行内元素中。
  • 没有样式会实际应用于文本(如字体粗细或字体颜色)。仅对背景颜色或边框等有用。

The demo provided 的答案显示了如何突出显示当前鼠标下方的文本行。

Solution 2: Split, join, loop, merge

使用 split() 方法将文本拆分为一个数组，并将单词边界或空格作为参数传递。将数组重新加入每个元素之间带有 </span><span> 的字符串，并用 <span> 和 </span> 包装整个内容，并用包含元素中生成的 HTML 替换原始文本节点。现在，遍历每个 span 元素，检查其在容器中的 y 位置。当 y 位置增加时，您知道您已经到达了新的一行并且之前的元素可以合并到一个跨度中。

优点

  • 每一行都可以使用任何 CSS 属性设置样式，例如 font-weight 或 text-decoration。
  • 每一行都可以有自己的事件处理程序。

缺点

  • 由于大量的 DOM 和字符串操作，速度慢且笨重

结论

可能还有其他方法可以实现您的目标，但我自己也不确定。当传递要拆分的字符的数字索引时，TextNode.splitText(n) 可以将 TextNode 拆分为两个(!)。上述解决方案都不是完美的，并且一旦包含元素调整大小时都会失效。

关于javascript - 我可以将每一行多行文本包装在一个跨度中吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4147080/

多行跨度strongcodespanjavascriptjquerytext

有关javascript - 我可以将每一行多行文本包装在一个跨度中吗？的更多相关文章

  1. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  2. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

    当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

  3. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  4. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  5. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  6. ruby - 我可以使用 Ruby 从 CSV 中删除列吗？ - 2

    查看Ruby的CSV库的文档，我非常确定这是可能且简单的。我只需要使用Ruby删除CSV文件的前三列，但我没有成功运行它。 最佳答案 csv_table=CSV.read(file_path_in,:headers=>true)csv_table.delete("header_name")csv_table.to_csv#=>ThenewCSVinstringformat检查CSV::Table文档:http://ruby-doc.org/stdlib-1.9.2/libdoc/csv/rdoc/CSV/Table.html

  7. ruby - 我可以使用 aws-sdk-ruby 在 AWS S3 上使用事务性文件删除/上传吗？ - 2

    我发现ActiveRecord::Base.transaction在复杂方法中非常有效。我想知道是否可以在如下事务中从AWSS3上传/删除文件:S3Object.transactiondo#writeintofiles#raiseanexceptionend引发异常后，每个操作都应在S3上回滚。S3Object这可能吗？？ 最佳答案 虽然S3API具有批量删除功能，但它不支持事务，因为每个删除操作都可以独立于其他操作成功/失败。该API不提供任何批量上传功能(通过PUT或POST)，因此每个上传操作都是通过一个独立的API调用完成的

  8. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

  9. ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串？ - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？

  10. ruby-on-rails - 如何在 ruby​​ 交互式 shell 中有多行？ - 2

    这可能是个愚蠢的问题。但是，我是一个新手......你怎么能在交互式ruby​​shell中有多行代码？好像你只能有一条长线。按回车键运行代码。无论如何我可以在不运行代码的情况下跳到下一行吗？再次抱歉，如果这是一个愚蠢的问题。谢谢。 最佳答案 这是一个例子:2.1.2:053>a=1=>12.1.2:054>b=2=>22.1.2:055>a+b=>32.1.2:056>ifa>b#Thecode‘if..."startsthedefinitionoftheconditionalstatement.2.1.2:057?>puts"f

随机推荐