获取一段文本中最后一行的宽度

2023-12-23

是否可以以某种方式测量具有多个中断/回车的段落中最后一行文本的长度?

          Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          Donec id elit non mi porta gravida at eget metus. Nulla vitae
          elit libero, a pharetra augue. Nullam id dolor id nibh
          ultricies vehicula ut id elit. Vivamus sagittis lacus vel
[here] ->|augue laoreet rutrum faucibus dolor auctor.|<- [to here]

注意:文本中没有手动中断。它是包裹在里面的单行文本,比方说,<p></p> tag.


在字符串的最末尾附加一个零宽度元素并测量其左侧偏移量应该就足够了。

HTML

<p id="text">…text…</p>

JS

// NOTE: This assumes LTR text!
// Using JQuery for simpler code

var $el = $("#text");
var originalText = $el.html();

$el.html(originalText + "<span id='cursor'></span>");
alert($("#cursor").offset().left + "px");
$el.html(originalText);

JSFiddle:http://jsfiddle.net/Ca4fF/1/ http://jsfiddle.net/Ca4fF/1/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

获取一段文本中最后一行的宽度 的相关文章

  • 为什么是 javascript:history.go(-1);无法在移动设备上工作?

    首先 一些背景 我有一个向用户呈现搜索页面 html 表单 的应用程序 填写标准并单击 搜索 按钮后 结果将显示在标准部分下方 在结果列表中 您可以通过单击将您带到新页面的链接来查看单个结果的详细信息 在详细信息页面中 我添加了一个 返回结
  • Jquery/Javascript 上传和下载文件,无需后端

    是否可以在没有后端服务器的情况下在 JavaScript 函数中下载和上传文件 我需要导出和导入由 JavaScript 函数生成的 XML 我想创建按钮 保存 xml 来保存文件 但我不知道是否可行 另一方面 我希望将 XML 文件直接上
  • Meteor - 从客户端取消服务器方法

    我正在通过服务器方法执行数据库计数 用户可以选择他们希望如何执行计数 然后调用该方法 我的问题是 计数可能需要一些时间 并且用户可能会在方法运行时改变主意并请求不同的计数 有什么方法可以取消调用的方法并运行新的计数吗 我认为 this un
  • Babel 7 Jest Core JS“TypeError:wks不是函数”

    将我的项目升级到 Babel 7 后 通过 Jest 运行测试会抛出以下错误 测试在 Babel 6 中运行没有任何问题 但在 Babel 7 中失败并出现以下错误 TypeError wks is not a function at Ob
  • Grails 在 javascript 内的 GSP 站点中使用 grails var

    我有一个在 GSP 文件中的 javascript 代码中使用 grails 变量值的问题 例如 我有一个会话值session getAttribute selectedValue 我想在 javascript 代码部分使用这个值 我现在的
  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive
  • 为什么在 Internet Explorer 中访问 localStorage 对象会引发错误?

    我正在解决一个客户端问题 Modernizr 意外地没有检测到对localStorageInternet Explorer 9 中的对象 我的页面正确使用 HTML 5 文档类型 并且开发人员工具报告该页面具有 IE9 的浏览器模式和 IE
  • 避免响应式页面的重复内容

    我目前正在做一个涉及响应式设计的项目 整个布局应该使用HTML和CSS来实现 我知道可以使用 java 脚本将内容从一个列布局移动到另一列布局 而无需复制内容 但是使用 HTML 和 CSS 是否可以实现相同的效果 以下面的例子为例 它会在
  • 如何在没有@import的情况下减少@import?

    我用的较少 从 Google PageSpeed 我了解到 使用 importCSS 文件中的内容会影响网站速度 所以我想排除任何 import来自我的 CSS 的东西 我有 2 个不同的样式表reset css and rebuild c
  • 如何获取给定 DOM 元素的所有定义的 CSS 选择器?

    如何使用 jQuery 获取给定 DOM 元素的所有定义的 CSS 选择器 定义后 我的意思是在应用于任何样式表的所有 CSS 选择器document 在某种程度上 这类似于 FireBug 实现的功能 其中显示所选 DOM 元素的所有应用
  • 为什么我不能在 AngularJS 中使用 data-* 作为指令的属性名称?

    On the t他的笨蛋 http plnkr co edit l3KoY3 p preview您可以注意到属性名称模式的奇怪行为data 在指令中 电话 Test of data named attribute br
  • 有没有办法阻止 prettier / prettier-now 将函数参数分解为新行

    当使用 prettier prettier now 在保存时进行格式化时 当一个函数包装另一个函数时 它会中断到一个新行 我想知道是否有办法阻止这种行为 例如 期望的输出 app get campgrounds id catchAsync
  • 在 vue.js 中访问数组对象属性

    给定以下数组vue js packageMaps Object packageMap 0 Object Id 16 PackageType flag list ProductCode F BannerBase packageMap 1 Ob
  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不
  • 更改文本输入标签中文本的大小?

    我有一个很大的文本输入框 但我无法更改字体大小
  • 为什么元素上的负底部边距会降低该元素父元素的高度?

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch
  • 将 MQTTNet 服务器与 MQTT.js 客户端结合使用

    我已经启动了一个 MQTT 服务器 就像this https github com chkr1011 MQTTnet tree master例子 该代码托管在 ASP Net Core 2 0 应用程序中 但我尝试过控制台应用程序 但没有成
  • jQuery 对象相等

    如何确定两个 jQuery 对象是否相等 我希望能够在数组中搜索特定的 jQuery 对象 inArray jqobj my array 1 alert deviceTypeRoot deviceTypeRoot False alert d
  • Spring Rest 和 Jsonp

    我正在尝试让我的 Spring Rest 控制器返回jsonp但我没有快乐 如果我想返回 json 但我有返回的要求 完全相同的代码可以正常工作jsonp我添加了一个转换器 我在网上找到了用于执行 jsonp 转换的源代码 我正在使用 Sp
  • FireFox 中的“contenteditable = true”高度问题

    当有空的时候div with contenteditable true CSS contenteditable true border 1px dashed dedede padding 3px HTML div div 在 IE 和 Ch

随机推荐

  • Powershell 脚本可以在 Powershell 中运行,但不能在 VB.Net 中运行

    我有一个简单的 powershell 脚本来启用 Exchange 中名为 test ps1 的邮箱 这是脚本 添加 pssnapin microsoft exchange management powershell admin 启用邮箱
  • Typescript 的代码覆盖率 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我们刚刚在 Typescript 中启动了一个项目 我们需要获取代码覆盖率数据 我们现有的 JavaS
  • 成功的 MySQL DELETE 返回什么?如何检查DELETE是否成功?

    使用 PHP 我尝试删除一条记录 但我想检查它是否成功 成功后是否返回任何内容DELETE FROM foo where bar stuff 或者 您知道其他方法来检查删除是否成功吗 或者我最好在删除它之前确保该行存在 如果可能的话 我试图
  • Kendo Grid:当行更改时如何从代码更新数据源

    这是我之前几篇关于更新剑道网格数据源的文章的延续 我想做的最后一件事是当用户转到新行时发生这种情况 感谢 Lars 迄今为止提供的令人印象深刻的帮助 我通过检测行更改 碰巧在指令中执行此操作 并回调网格控制器来执行此操作 在网格控制器中我在
  • WSL2 上的 Ubuntu 18.04:“登录失败:尚未授予用户在此计算机上请求的登录类型。”

    重新启动 Windows 计算机后 我在尝试打开 Ubuntu 18 04 WSL2 实例时收到此错误 Logon failure the user has not been granted the requested logon type
  • MongoDB 投影参数在 findOne() 中不起作用

    我试图在 findOne 上使用投影参数从文档 统计信息 中提取单个字段 但它似乎只是返回整个文档 我在 Node js 中使用版本 mongodb 3 4 1 这是文档结构 id 5e563015fa9a1a0134cac3cb user
  • javascript图形库[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个不错的 JavaScript 图形库 它可以处理以下类型的图形 折线图 直方图 散点图 动态图表 我已经尝试过 Google
  • 防止伪元素自行断行

    我有一个链接样式 可以使用以下命令在链接末尾添加 SVG 箭头 after 问题是 当视口改变大小时 有时只有 SVG 会断线 我怎样才能设置它 以便 SVG 总是用最后一个单词来换行 a tag txtbtn font size 1 12
  • PHP预防xss

    Is htmlentitiesPHP 中防止 XSS 的最佳解决方案 我也想允许简单的标签 比如b i a and img 实现这一点的最佳解决方案是什么 我确实考虑过 bbcode 但发现如果没有正确实现我也会遇到 XSS 问题 我应该怎
  • 当我使用 document.execCommand("copy") 时,javascript 换行符不适用

    您好 我正在使用下面的代码构建一个字符串并复制它 但是在粘贴它时的输出中 换行符不适用 function copyToClipboardShipto var temp
  • 在 Orchard 中创建/编辑后清空内容项

    我正在使用在 Orchard 中创建 n to n 关系的指南 ocs orchardproject net Documentation Creating 1 n and n n relations 并进行一些细微的修改 虽然示例代码运行良
  • 移动语义和原始类型

    示例代码 int main std vector
  • 将文本搜索 where 子句添加到 SPARQL 查询

    我得到了一个我认为是简单的任务 获取现有的 SPARQL 查询并调整 WHERE 子句以将结果限制为特定文本字段包含特定搜索词的实体 但是 我对 SPARQL 语言完全陌生 我尝试过的任何方法都不起作用 看来我需要使用text query
  • spring 环境特定的 log4j 配置

    我正在使用传统方式加载 log4j xml
  • 使用自定义 KMS 密钥访问 AWS 参数存储值

    我正在尝试使用 java 从参数存储中读取 AWS 参数 我已使用自定义加密密钥创建了参数 我在互联网上没有看到使用自定义 KMS 密钥的示例代码 下面是我当前正在运行的代码 这里我们使用默认的 KMS 密钥 AWSSimpleSystem
  • 使用 PHP 仅获取除法的余数

    我正在划分19 5我在哪里用过19 5但我无法得到剩余的only 我如何得到它 谢谢 让 echo 19 5 应返回 4 即 19 5 的余数 3 rem 4 不需要使用下限 因为模运算的结果始终是整数值 如果您在处理浮点值时想要余数 那么
  • iOS - 请求在初次拒绝后启用推送通知

    我想知道在最初拒绝后是否可以从应用程序内强制弹出 XXXXX 想向您发送推送通知 用例如下 用户安装应用程序 获取有关推送通知的警报 并拒绝 因为他们还不知道 信任该应用程序 他们使用该应用程序并主动在应用程序内请求收到警报 当某事发生时
  • 如何去除应用栏上方的阴影?

    我想通过添加使状态栏透明
  • 使用 Eclipse 和 Tomcat 的 JSF 2.0 教程 [已关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 获取一段文本中最后一行的宽度

    是否可以以某种方式测量具有多个中断 回车的段落中最后一行文本的长度 Morbi leo risus porta ac consectetur ac vestibulum at eros Donec id elit non mi porta