使用 JavaScript 算出 DIV 可以容纳多少个字符

2023-11-21

有谁知道使用 JavaScript 计算出 HTML 中的 DIV 块可以容纳多少个字符的最佳方法是什么?

任何建议都会有很大帮助。


您可以迭代地将字符添加到隐藏的 div 中并检查其宽度。不确定是否有更好的方法。

编辑:类似这样的事情:

var targetWidth = document.getElementById('DivToCheck').clientWidth;
var stringToFit = 'abcdefghijk';
var numChars = 0;
for(var i=0; i < stringToFit.length; i++)
{
   document.getElementById('hiddenDiv').innerHTML += stringToFit.charAt(i);
   if (document.getElementById('hiddenDiv').clientWidth > targetWidth)
   {
       numChars = i - 1;
       break;
   }
}

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

使用 JavaScript 算出 DIV 可以容纳多少个字符 的相关文章

  • 使用 Angular 下载具有动态 src 的脚本

    Angular 提供了通过动态名称动态加载模板的方法ng include 该部分中的内联 JS 和 CSS 可以正常加载 但没有一个好的方法来下载带有动态 url 的脚本 我们需要下载脚本 相对于调用它们的 html 部分的路径 即我们有一
  • 如何抑制窗口鼠标滚轮滚动...?

    我正在开发嵌入页面中的画布应用程序 我有它 因此您可以使用鼠标滚轮放大绘图 但不幸的是 这会滚动页面 因为它是文章的一部分 当我在 dom 元素上滚动鼠标滚轮时 是否可以阻止鼠标滚轮在窗口上滚动 附加鼠标滚轮 不是 Gecko DOMMou
  • Javascript正则表达式用于字母字符和空格? [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我需要一个
  • 为什么是 javascript:history.go(-1);无法在移动设备上工作?

    首先 一些背景 我有一个向用户呈现搜索页面 html 表单 的应用程序 填写标准并单击 搜索 按钮后 结果将显示在标准部分下方 在结果列表中 您可以通过单击将您带到新页面的链接来查看单个结果的详细信息 在详细信息页面中 我添加了一个 返回结
  • 标签获取 href 值

    我有以下 html div class threeimages a img alt Australia src Images Services 20button tcm7 9688 gif a div class text h2 a hre
  • 在requestAnimationFrame中使用clearRect不显示动画

    我正在尝试在 HTML5 画布上做一个简单的 javascript 动画 现在我的画布是分层的 这样当我收到鼠标事件时 背景层不会改变 但带有头像的顶层会移动 如果我使用 requestAnimationFrame 并且不清除屏幕 我会看到
  • 如何将 Google Charts 与 Vue.js 库一起使用?

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google
  • MVC 在布局代码之前执行视图代码并破坏我的脚本顺序

    我正在尝试将所有 javascript 包含内容移至页面底部 我正在将 MVC 与 Razor 一起使用 我编写了一个辅助方法来注册脚本 它按注册顺序保留脚本 并排除重复的内容 Html RegisterScript scripts som
  • 跟踪用户何时点击浏览器上的后退按钮

    是否可以检测用户何时单击浏览器的后退按钮 我有一个 Ajax 应用程序 如果我可以检测到用户何时单击后退按钮 我可以显示适当的数据 任何使用 PHP JavaScript 的解决方案都是优选的 任何语言的解决方案都可以 只需要我可以翻译成
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • 在 webpack 2.x 中使用 autoprefixer 和 postcss

    如何使用autoprefixer使用 webpack 2 x 以前 它曾经是这样的 module loaders test scss loader style css sass postcss postcss gt return autop
  • 通过 CDN 使用 Dojo 时如何加载自定义 AMD 模块?

    我正在使用 google 的 CDN 并尝试使用他们的加载程序加载我自己的 AMD 模块 我知道我做错了什么 但我被困住了 有任何想法吗
  • 如何使输入字段和提交按钮变灰

    我想变灰这两件事 http doorsplit heroku com 歌曲输入字段和提交按钮 直到用户输入艺术家 有没有一种简单的方法可以通过 JQuery 来做到这一点 艺术家输入字段的id是 request artist 你可以这样做
  • 我可以使用 jQuery 打开下拉列表吗

    对于 HTML 中的下拉列表
  • 如何在类似控制台的环境中运行 JavaScript?

    我正在尝试遵循这里的示例 http eloquentjavascript net chapter2 html http eloquentjavascript net chapter2 html and print blah 在浏览器中运行时
  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不
  • 为什么 jquery 没有检测到单选按钮未被选中的情况? [复制]

    这个问题在这里已经有答案了 可能的重复 JQuery radioButton change 在取消选择期间不会触发 https stackoverflow com questions 5176803 jquery radiobutton c
  • 如何在 AngularJS 循环内使用标签

    所以我在里面ng repeat像这样 li li
  • 无效字符错误:“fred”

    我确信他一定是一个新手问题 简单来说 我想定义我的第一个 Polymer dart 组件 只是我一直在同一个减速带上踢脚趾 为了使事情变得非常简单 我将其简化为一个非常简单的示例 我做了一个简单的rename示例 跑表 来自 Dart 组件
  • fullCalendar 未显示正确的结束日期

    我正在看调试页面 http jsbin com wukofacaxu edit js outputFullCalendar 官方网站的 我想安排一个活动时间为 22 09 2015 至 30 09 2015 dd mm yyyy 但它只显示

随机推荐

  • 在 if 语句中分配和测试变量的最合适方法是什么?

    以下哪一种是首选的做事方式 为什么 是否有任何具体情况会产生任何影响 假设函数 bar 在任何时候都不取零值 案例1 测试两个条件的真值 if foo bar foo lt 0 error 情况 2 仅测试分配的变量 if foo bar
  • 如何在 IE 中一次性下载多个文件

    我想通过单击 jsp 中的按钮来下载多个文件 我在 js 中使用以下代码来调用一个 servlet 两次 var iframe document createElement iframe iframe width iframe height
  • UIView 动态高度取决于标签高度

    我有一个标签 它动态地从数据库中获取一些数据 这些数据是字符串 有时可以是 3 4 5 行等 所以这个标签位于 UIView 内部 UIView Label 我怎样才能使UIView动态获取标签的特定高度 你可以用这张照片的故事板来做 将标
  • 保护 git 存储库中的文件

    我有一个中央存储库 其中包含我希望防止其他用户更改 通过推送 的文件子集 如果我将这些文件添加到 gitignore 它们不会被克隆 是否可以提供克隆所有文件的能力 但克隆后将其中一些添加到 gitignore在客户端 您可以将文件放在存储
  • WCF 是否始终使用 SOAP 通过绑定发送信息?

    据我所知 您可以从一系列绑定中进行选择 例如 TCP HTTP HTTPS 等 我认为它总是使用 SOAP 通过此连接发送数据是否正确 我正在观看 WCF 指南 其中讨论了如何将异常序列化为 SOAP 并发送到客户端 我本以为并非所有绑定都
  • Android 检查是否有WiFi但上不了网

    我正在编写一个程序 需要检查三种状态 1 如果我没有 WiFi 2 如果我有 WiFi 但没有互联网连接 就像我打开路由器但拔掉以太网电缆 以及 3 如果我有 WiFi 和互联网连接 然后 我会更改应用程序中图标的颜色来代表这些状态之一 红
  • Ctrl+Space 更改键盘,而不是在 Visual Studio 2010 上显示 Intellisense 的自动完成列表

    我注意到 Visual Studio 2010 意外地更改了键盘布局 我尝试了一些解决方案 例如 Going to Windows Control Panel and removing other languages Going to Me
  • 使用 MVVM 从 WPF 应用程序启动对话框/子窗口的标准方法

    所有 我想知道使用 MVVM 模式从 WPF 启动 子 对话框 窗口的公认最佳方法 行业标准 我遇到过以下文章 A CodeProject 使用 MVVM 模式时显示对话框 这种方法对我来说似乎不错 但有些过分了 这是某种程度的代码复制 我
  • Python 3 中大于 10^2000 的数字的平方根

    我想在Python中计算大于10 2000的数字的平方根 如果我将这个数字视为普通整数 我总是会得到这个结果 Traceback most recent call last File line 3 in
  • 在项目“MyProject”上运行构建器“Faceted Project Validation Builder”时出错

    我正在研究 Blackberry webworks Phonegap 框架 Apache Ant 并使用示例 index html 在 Eclipse 3 6 中配置它们 我关注了这篇文章PhoneGap BlackBerry WebWor
  • 您可以从 GitHub 上的命令行发出拉取请求吗?

    似乎您必须与 github com 交互才能发起拉取请求 是这样吗 UPDATE The hub命令现已成为官方github项目 也支持创建拉取请求 ORIGINAL 似乎添加到 hub 命令中特别有用 http github com de
  • ES6 类私有属性只是语法糖吗?

    使用 语法我们现在可以创建私人财产在 ES6 类中是这样的 class Person name constructor name this name name getName return this name let ron new Per
  • Lambda 表达式以及如何组合它们?

    如何使用 OR 将两个 lambda 表达式合并为一个 我已尝试以下操作 但合并它们需要我将参数传递到表达式 调用调用 但是我希望将传递到新 lambda 的值传递到每个子 lambda 上 Expression
  • Java:以编程方式确定类路径上加载的所有包名称

    关于如何找到列表的任何建议包名存在于当前类路径 这需要在运行时由类路径上加载 和执行 的类之一以编程方式完成 即 反了 而不是从外到内 更多细节 我考虑的一种方法是对类加载器迄今为止加载的每个类使用反射 并从中提取包名称 但是 我的应用程序
  • iOS 6 ViewController 正在旋转但不应该旋转

    我希望我的几个应用程序视图控制器在 iOS 6 0 中不旋转 这就是我为使 iOS 6 中的轮换成为可能而所做的 1 在 application didFinishLaunchingWithOptions 中设置 windows rootv
  • 动态生成的 HTML 的格式 - 没人关心吗?

    I have veryWeb开发经验很少 所以这可能是一个非常基本的问题 只是 以我有限的经验来看do有 一点PHP 一点Ruby on Rails 动态生成HTML的方式似乎是格式化的只是 没关系 它最终变得丑陋 有奇怪的缩进 没有人关心
  • 流式传输 xml-conduit 解析结果

    我想用xml conduit 具体来说Text XML Stream Parse为了从大型 XML 文件中延迟提取对象列表 作为测试用例 我使用最近重新发布的 StackOverflow 数据转储 为了简单起见 我打算从中提取所有用户名st
  • 理解范围和数组中的 ruby​​ splat

    我试图理解之间的区别 1 9 and 1 9 如果我将它们分配给变量 它们的工作方式是相同的 splat1 1 9 splat1 1 2 3 4 5 6 7 8 9 splat2 1 9 splat2 1 2 3 4 5 6 7 8 9 但
  • 如何启用/禁用 FloatingActionButton 行为

    我正在开发一些片段中的应用程序 我想隐藏浮动操作按钮 当我设置android 可见性 消失 当我上下滑动时 行为动画向我显示浮动操作按钮 有什么方法可以禁用 启用 FloatingActionButton 行为 谢谢你提前 这是我的代码 Q
  • 使用 JavaScript 算出 DIV 可以容纳多少个字符

    有谁知道使用 JavaScript 计算出 HTML 中的 DIV 块可以容纳多少个字符的最佳方法是什么 任何建议都会有很大帮助 您可以迭代地将字符添加到隐藏的 div 中并检查其宽度 不确定是否有更好的方法 编辑 类似这样的事情 var