Javascript:如何判断 是否断成两行?

2024-01-10

我为一些短跨度元素显示了气泡帮助。气泡位于该跨度下方的中心,只要跨度不被打破成两条线,气泡看起来就很棒。

看起来不错:

tell <span>irregular: told, told</span>

看起来很糟糕:

tell <span>irregular: told,
told</span>

它看起来很糟糕,因为气泡不再位于跨度下方的中心。有没有办法使用 JavaScript 或 jQuery 来判断该跨度是否分为两行?


9000的评论是正确的。诀窍是能够访问<span>您知道将在一行上呈现。您可以通过使用特定的跨度将块的第一个单词包装在跨度中来做到这一点id,您也可以使用最后一个单词或其他一些单词;有时单个单词会跨线,但第一个单词应该是安全的。

一旦你有了只在一条线上的东西,你就可以将它的高度与另一条线的高度进行比较<span>这将获得工具提示。如果<span>就是让工具提示比单行高<span>然后它已经换行为多行。

试试这个jsfiddle:

http://jsfiddle.net/ambigously/JbMhZ/1/ http://jsfiddle.net/ambiguous/JbMhZ/1/

调整右侧窗格的大小,直到红色文本换行但绿色文本不换行。然后打Run在顶部的工具栏中,它应该在底部显示Result pane:

#has-break spans more than one line
#no-break spans only one line

我并不为这个黑客感到自豪,但它应该有效。

我想知道为您的工具提示提供更好的定位算法是否是一个更好的主意。也许将鼠标坐标从悬停事件中拉出,并使用它来定位工具提示,而不是根据<span>.

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

Javascript:如何判断 是否断成两行? 的相关文章

  • 试图隐藏选择列表中的选项..不适用于 chrome 和 ie

    我有一个选择列表 其中有很多选项 根据某些输入 我想从选择列表中隐藏一些选项 为了隐藏选择列表中的选项 我编写了jquery 例如 selectlist1 option each function this hide 但这段代码似乎只适用于
  • websockets 如何处理同一浏览器的两个选项卡

    I have 1 个 PHP 服务器 提供 http 请求 和 1 node js 发布更新的数据消息 每个连接都带有 websocket php 服务器设置其 cookie 在一个浏览器中 此 cookie 可在所有选项卡中使用 当浏览器
  • .points 不透明度/大小在三个.js 内

    我回来回答有关 points 的第二个问题 这次想知道如何将不透明度从 0 更改为 1 然后又回到距发射器的特定像素距离内 var particleCount 14 particles new THREE Geometry pMateria
  • jquery 中的函数返回未定义[重复]

    这个问题在这里已经有答案了 我在 jquery 中调用的函数返回未定义 我检查了该函数 当我对其进行调试时 它返回正确的数据 function addToPlaylist component type add to pl value pl
  • iphone jquery 移动闪烁问题

    我在 iPhone 上使用使用 jQuery mobile 开发的应用程序时遇到闪烁问题 我尝试了互联网上提供的几种解决方案 包括 CSS 更改 将过渡设置为 无 甚至在 jquerymobile js 中注释代码 但没有运气 我使用的 J
  • AngularJS + jQuery 移动

    是否还有其他可能性来设计AngularJS以移动友好的方式应用程序CSS 我正在计划一个移动应用程序 并希望使用 AngularJS 进行逻辑和数据绑定 但我不想自己设计所有内容CSS The AngularJSFAQ说它使用jQuery
  • 可以禁用幻灯片的触摸模拟但不能禁用滚动条(危险的滑动器)吗?

    我的页面上有一个危险的滑动器 它成功地模拟了幻灯片和随附滚动条上的触摸事件 允许单击鼠标并移动以向左或向右滑动幻灯片 这很好 但我现在在滑动器内的幻灯片上调用了可拖动 这意味着我需要停止此触摸模拟 拖动幻灯片并同时移动它们会引起混乱 但仅限
  • 如何知道 .keyup() 是否是字符键(jQuery)

    如何知道 keyup 是否是字符键 jQuery input keyup function if key is a character such as a b A b c 5 3 2 etc not enter key or shift o
  • ES6 模块范围

    我有代码 lib js var a a export var b b main js console log a a variable is not available in a global scope import b from lib
  • 如何从 html 页面 [javascript] 调用 Web 服务方法而不刷新页面

    我有一个webservice这将返回一个值 我的要求是 我需要调用它webservice从一个index html页面 该页面有一个 html 提交按钮 在该按钮上单击我正在呼叫JavaScript 从那里我想调用网络方法 我怎样才能做到这
  • HTML5 文件 API 和 AJAX 上传分块问题

    我编写了一个带有单独进度的拖放多个文件上传等 除了一件事之外 它工作得非常好 上传较大文件时 有时浏览器会锁定 直到上传完成 我认为这是因为该文件存储在浏览器的内存中并占用了浏览器可用的所有资源 我想知道 是否可以逐段读取文件并在读取时通过
  • 轮播滑动(未滑动)事件上的火灾事件,Bootstrap 3

    Bootstrap 2 似乎可以很好地处理幻灯片事件 请参阅这个问题 https stackoverflow com questions 9651466 how to attach slide slid events to the boot
  • 了解 Document.createElement()

    我在用着GWT及其底层DOM能力 我基本上想要实现的是 Have a div包含一些文本的元素 其中一些文本将被包围span元素 span 元素可相互拖动并提供上下文菜单 New span元素可以由最终用户动态创建 它可能是这样的 在应用程
  • 如何在 TypeScript 中使用 navigation.replace ?

    我试图在我的代码中使用它 const navigation useNavigation navigation replace AllFriends 但我不断收到错误消息 Property replace does not exist on
  • Graphql 将多个查询合并(组合)为一个?

    我正在尝试使用 JavaScript 将多个 GraphQL 查询合并为一个查询 我正在寻找这样的东西 let query3 mergeQueries query1 query2 我们事先不知道哪些查询将被组合 假设我有这样的查询 输入查询
  • 触发 jQuery UI 滑块事件

    如何触发更改事件jQuery UI 滑块 http docs jquery com UI Slider 我以为会是 slider trigger slidechange 但这没有任何作用 完整的示例脚本如下
  • Vue - 调度完成后调用 store getter?

    我正在使用 Laravel 5 7 Vue2 Vuex 我在调度调用完成后让 Vue 返回存储值时遇到一些困难 我的申请流程如下 我单击一个提交按钮 该按钮调用组件上的 validate Validate 分派到我的 addLease 操作
  • 从更多元素中仅获取唯一名称

    我动态渲染了 HTML 其中列出了未确定数量的单选按钮 这些按钮的名称代表数据库中的某些 id 我需要收集收音机的所有唯一名称 这是一个例子
  • 为什么 JavaScript 中是 [1,2] + [3,4] = "1,23,4" ?

    我想将一个数组的元素添加到另一个数组中 所以我尝试了以下方法 1 2 3 4 它的回应是 1 23 4 到底是怎么回事 The 操作员没有为数组定义 发生的事情是 JavaScript将数组转换为字符串并将它们连接起来 Update 由于这
  • 从 jQuery UI 对话框调用 Bootstrap 模式:超出最大调用堆栈大小

    我有一个有点奇怪的问题 我正在调用 Bootstrap Modal 同时打开了 jQuery UI 对话框并且正在获取RangeError Maximum call stack size exceeded 在控制台中 奇怪的是 只有当我在打

随机推荐