Javascript 会自动设置元素的字体大小以使文本不会溢出? (自动调整)

2024-04-13

你知道我的意思? 假设我们有:

<div style="width:100px;font-size:10px">Some Text</div>

但是,我们也可能在该 div 中包含更长的文本字符串,在这种情况下,我希望该 div 具有 font-size:7px 或其他值,以便整个字符串适合而不会溢出。

我确信已经有人写过类似的东西了,我不想重新发明它。最好是 jQuery 插件?

任何建议,将不胜感激!谢谢


基于尼克问题中提出的答案:

$(function() {
    $(".shrinkByWidth").each(function() {
        var targetWidth = $(this).parent(':first').width();

        if (isNaN(parseInt($(this).css("font-size"))))
            $(this).css("font-size", '24px');

        while ($(this).width() > targetWidth) 
        {
            $(this).css("font-size", (parseInt($(this).css("font-size")) - 1) + 'px');
        }
    });
});

对我来说效果很好!

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

Javascript 会自动设置元素的字体大小以使文本不会溢出? (自动调整) 的相关文章

  • Vue 多个组件位于一个包/文件中

    假设我想创建一个 UI 包 如何将多个组件放入一个 JS 文件中 通常我会将不同的组件放在不同的文件中 import ButtonText from ButtonText vue import ButtonIcon from ButtonI
  • 下拉菜单导致滚动条

    我用过这个W3C 的示例 http www w3schools com bootstrap bootstrap dropdowns asp div class dropdown div
  • jQuery 选择器在控制台中不起作用

    我一辈子都无法解决这个问题 我正在运行 js 容器状态 是页面上正在运行的 js 的控制台日志 它显示一个选择器 但如果我想在控制台中执行任何操作 它只会返回 null 我假设我在某个地方过度编写了 jQuery 函数 就好像我调用了 jQ
  • 如何使用ckeditore通过ajax发送数据?

    我在 django 中有一个表格 这是 撰写邮件 形式 我将此表单从视图发送到我的模板 然后应用 ckeditor 来更改正文样式 我希望通过 ajax 发布此表单 当使用 ckeditor 时 body 字段的值不会随 request P
  • AngularJS Youtube 播放器嵌入非常大的播放列表

    我目前正在构建一个 AngularJS 应用程序 我知道它有点过时 但我对它很有信心 我的应用程序需要嵌入一个 YouTube 播放器 其中包含一个非常大的播放列表 大约 1500 个项目 但我无法对其进行编码 以便它实际上可以嵌入超过 2
  • html5 vs flash - 完整的比较图表在哪里? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 因此 自从史蒂夫 乔布斯说 Flash 很糟糕并暗示 HTML5 可以完成 Flash 可以做的所有事情
  • 是否有 IE 渲染完成事件?

    在尝试确定页面加载时间为 20 秒的原因时 我发现 IE8 中有一些奇怪的行为 场景是这样的 我进行 ajax 调用 它返回并且回调看起来像这样 StoreDetailsContainer html tableHtml var StoreD
  • Javascript 清理:插入可能的 XSS html 字符串的最安全方法

    目前我正在将此方法与 jQuery 解决方案结合使用 以清除字符串中可能的 XSS 攻击 sanitize function str return htmlentities str ENT QUOTES return div div tex
  • 有什么简单的方法可以清理 Google Maps v3 API 上的所有标记、折线和其他叠加层吗?

    我想获得一张新地图 而不是使用刷新网页 thanks 并有简单的方法来获取地图上的所有叠加层 在 v2 API 中 有clearOverlays http code google com apis maps documentation ja
  • 如何使用 JavaScript 禁用滚动条?

    当我仅在 Internet Explorer 7 中显示代表模式窗口的 div 时 我需要锁定浏览器滚动条 谷歌搜索我发现我可以使用document body style overflow hidden 但这不适用于 IE7 我也尝试过do
  • javascript 代码只能在函数之外工作 - 为什么?

    为什么这段代码不能像下面写的那样工作 但如果我注释掉function testBgChange 并将代码保留在该函数内 它可以正常工作 如果我将代码保留在函数中然后调用该函数 会有什么区别
  • 如何使网站适应用户的屏幕分辨率?

    我正在使用 1024x768 屏幕分辨率来设计我的网站 当您从屏幕分辨率较小 较大的计算机上的浏览器中查看网站时 网站开始变形 无论用户的屏幕分辨率是什么 如何使网站适应用户的屏幕分辨率 我相信通过 JavaScript 或 CSS 是可能
  • 如何从代码隐藏文件中的asp.net用户控件注册(调用)jQuery函数?

    如何从代码隐藏文件中的asp net用户控件注册 调用 jQuery函数 您可以使用ClientScriptManager RegisterStartupScript http msdn microsoft com en us librar
  • 变量值的 swap() 函数[重复]

    这个问题在这里已经有答案了 我无法达到下面这个交换函数的预期结果 我希望将值打印为 3 2 function swap x y var t x x y y t console log swap 2 3 任何线索将不胜感激 您的函数正在内部交
  • 创建响应式眼睛焦点图标

    我一直在尝试制作响应式彩色眼睛焦点图标 但到目前为止我所尝试的一切均不成功 我试图在某种程度上复制真眼的颜色 我使用边框 框阴影来获取颜色 但该部分没有缩放 也尝试过轮廓 但也失败了 那个甚至不是圆的 div 的高度当前是静态的 但我希望它
  • 保存 dat.gui 预设以动态添加控件?

    我正在向 dat gui 界面动态添加控件 但 保存设置 功能无法识别它们 var mygui new dat GUI mygui remember mygui standard way of adding a control mygui
  • 如何将字符串转换为 Javascript 中可执行的代码行?

    我有以下代码 console log I am var x console log Alive 现在我只想使用x执行分配给它的代码字符串 例如 我什至可能不知道 x 的值 但只是想执行它 这可能吗 eval https developer
  • 从另一台服务器读取 Node.js 中的大文件

    我有两台相互通信的服务器 Server1 向 Server2 请求文件的部分内容 并将收到的数据存储到一个文件中 Server2 应该接收每个请求并创建一个流管道传输数据 假设服务器2中存储的文件 目录 如下 bigfile gz bigf
  • HTML标题属性样式[重复]

    这个问题在这里已经有答案了 如何在不使用 javascript 或 CSS 的情况下更改以下标记中标题属性的样式 因为我将 HTML 插入到原本无法编辑的文档中的特定位置 span title This is information Thi
  • 如何在jsp页面中包含javascript

    我是 J2EE 和 Web 开发的新手 这是我的问题 我想在网页中包含 angular js 这是有效的版本 但我也想要一些本地的 javascript 文件 并且希望我想在本地目录中导入 angularjs

随机推荐