程序员经验分享-hwhale

如何自动缩放字体大小以适应 div 的内容？

2023-11-22

我有一个带有一些文本的 div：

<div style="white-space:nowrap;overflow:none;width:50px;">
  With some text in it
</div>

如何缩放文本的字体大小以使所有文本都可见？


反之亦然。您可以将文本包装在内部 DIV 中，并使用 JavaScript 测量其宽度。测试该宽度是否比父 DIV 宽。获取当前字体大小，并逐渐向下移动 1px，直到内部 DIV 的宽度小于或等于外部 DIV 的宽度。

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

css

如何自动缩放字体大小以适应 div 的内容？ 的相关文章

  • 在 Chrome 中，应用于包含图像的锚点的轮廓高度不正确

    对于我正在开发的网站 我希望当链接聚焦 悬停 活动时 链接周围会出现虚线轮廓 我希望文本和图像链接发生这种情况 我遇到的问题是 虽然我的代码在 Firefox 和 IE 中运行良好 但在 Chrome 7 0 517 41 中 虚线轮廓与我

  • 如何使用div绘制曲线？

    我需要使用 CSS 绘制两条曲线 我尝试过组装一些divs 使用CSSborder radius绘制弧形面板 但结果很糟糕 还有更好的算术吗 正如我之前在评论中提到的 请不要使用CSS用于实现复杂的曲线和形状 虽然仍然可以使用 CSS 来实

  • 这个 CSS 选择器是什么？ [类* =“跨度”]

    我在 Twitter Bootstrap 中看到了这个选择器 show grid class span background color eee text align center border radius 3px min height

  • 如何实现右边缘倾斜的 div？ [复制]

    这个问题在这里已经有答案了 我几天来一直在寻找使 div 的右边缘倾斜 45 度的代码 这是我特别想要得到的图像示例 似乎有很多 倾斜边缘 div 的示例 但我找不到任何具有特定右侧倾斜的示例 我花了很多时间试图改变其他人的代码 但结果却一

  • 如何设置引导开关的 css 颜色？

    如何在此引导开关中将蓝色更改为另一种颜色 我尝试更改输入元素的颜色和背景颜色 但它没有更改开关颜色 这是 html 和 bootstraplink https getbootstrap com docs 4 2 components for

  • 拖放区缩略图宽度图像大小

    如何更改上传图像的缩略图大小 我在我的javascript中尝试过thumbnailWidth 350 但是这不会增加缩略图大小 而缩略图只是看起来放大了 如何操作图像缩略图大小 HTML section section

  • 夜间值班。单击带有文本的元素

    我遇到问题 无法单击具有某些独特文本的网页元素 我有这样的结构 div class wg wagon type title Text div 我试试这个 click wg wagon type title contains Text 但我有

  • 如何在 div 容器内的元素之间留出空间

    我有一个弹性容器 它将由元素动态填充 容器没有固定宽度 I use max width max content 并且可以包含我想要的任意数量的元素 问题是我需要这些元素之间的间距 但不需要元素和容器之间左侧和右侧的间距 当然我可以用 ele

  • React Native 上的文本缩进

    我需要缩进 React Native 段落的第一行 但使用常见的csstext indent财产 textIndent 与 React Native 不兼容 伪元素选择器也不兼容 例如 first line 有什么方法可以做到这一点而不用将

  • 如何检查元素的内容是否为空，如果是，则在 jquery 中删除该元素

    我目前正在尝试选择某个 div 内没有内容的任何 h2 元素并将其删除 这是我的 html 代码 div class skipToContainer h2 class vidSkipTo Hello h2 h2 class vidSkipT

  • 如何在 Bootstrap 列中使用文本溢出？

    假设我有一行具有固定高度 并且我在其列中插入了一些文本 如果太长 我希望将其剪掉 并在行尾添加三个点 如下所示 我在用着文本溢出 省略号 我的行中有此属性 但无法使其工作 JsFiddle http jsfiddle net Alexnot

  • 如何更改 Shiny 中 navbarPage 折叠的断点

    我想用shiny navbarPage collapsible TRUE 当在小屏幕上查看我的 Shiny 应用程序时 将导航元素折叠到菜单中 默认情况下 当浏览器宽度小于 940 像素时会触发折叠 有什么方法可以改变这一点 以便在稍大的浏

  • 两种颜色边框

    客户想要两种颜色的边框以获得浮雕外观 我可以在一个元素上执行此操作吗 我希望避免堆叠两个具有单独边框的 DOM 元素 是的 使用outline财产 它充当您边界之外的第二个边界 但请注意 它可能会以一种奇怪的方式与边距 填充和阴影进行交互

  • CSS3 box-shadow 用于类似重叠的 div

    我正在尝试用css3来实现这种效果 HTML 代码显然是这样的

  • 如何使用 javascript 或 jquery 生成 CSS 路径？

    关于如何生成元素的 CSS 路径有什么建议吗 CSS 路径是识别特定元素所需的 css 选择器的路径 例如 如果我的 html 是 div div class bar ul li 1 li li 2 li li span class sel

  • IE7 显示问题：菜单中的表格

    我写了一个菜单样式 在 IE8 FF3 6 GC7 中运行良好 现在的问题是 我的老板希望它甚至可以在 IE7 上运行 我真的很努力地让它在 IE7 上运行 但无法获得相同的外观 menu css a outline none menu m

  • 从 Bootstrap 中删除字形

    如何从 bootstrap 3 中删除所有字形实例 看起来它已经大量嵌入到 css 文件中了 我正在努力使文件大小尽可能最小 只需简单地克隆引导程序https github com twbs bootstrap sass https git

  • 如何重置使用 JavaScript 更改的 CSS 属性？

    我的导航按钮的宽度从 100px 增加到 150px 当鼠标悬停在 nav li hover width 150px 但是使用 javascript 我已经做到了 无论选择哪个选项 宽度都将继续为 150px 当选择每个选项时 它会使其他选

  • 使用 JavaScript 使链接保持活动状态并在单击时显示悬停效果

    I am struggling to make this work I d like to make it where if O F is clicked the hover state stays active if another li

  • CSS 是否有不等于选择器？

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如

随机推荐

  • Paramiko / scp - 检查远程主机上是否存在文件

    我正在使用 Python Paramiko 和 scp 在远程计算机上执行一些操作 我使用的一些机器要求文件在其系统上本地可用 在这种情况下 我使用 Paramiko 和 scp 来复制文件 例如 from paramiko import

  • .NET 文件系统包装库[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 目前不接受答案 由于某种原因我找不到一个 但肯定有人已经创建了一个 NET IO 库包装器 我希望能够模拟对 File Exists 等的调用 而内置的静态方法对此

  • 绑定到 DataTable 的滚动事件

    我需要绑定到设置为垂直滚动的 DataTable 的滚动事件 很明显 简单的事件绑定是行不通的 table tbody on scroll function alert 我创建了一个demo here 有谁知道可以执行此操作的 API 方法

  • .NET 中每个文件规则一个类？ [关闭]

    Closed 这个问题是基于意见的 目前不接受答案 我遵循这条规则 但我的一些同事不同意它 并认为如果一个类较小 它可以与其他类留在同一个文件中 我经常听到的另一个论点是 连微软都不这样做 那我们为什么要这样做呢 对此 普遍的共识是什么 在

  • 模板概念进入了 c++14 吗？

    概念是一个很好的功能 例如 当模板实例化出现问题时 它可以用可读的消息替换丑陋的编译器错误输出 不幸的是他们没有得到to C 11 有人知道它是否进入了 C 14 吗 No but 对 Bjarne Stroustrup 的采访表示它们将被

  • 如何将 FOS\RestBundle 的默认格式指定为 json？

    我对应的配置是 fos rest view view response listener force sensio framework extra view annotations false 将路线指定为确实很烦人 Route jobs

  • Python 过滤器/最大组合 - 检查空迭代器

    使用Python 3 1 我知道这个问题已经被问过很多次 用于测试迭代器是否为空的一般问题 显然 对此没有简洁的解决方案 我猜是有原因的 迭代器在被要求返回下一个值之前并不真正知道它是否为空 不过 我有一个具体的例子 希望我能从中编写出干净

  • 如何将字符串转换为 IP 地址，反之亦然

    如何转换字符串 ipAddress struct in addr 反之亦然 如何提交未签名的长 ip 地址 谢谢 Use inet ntop and inet pton 如果你需要其他方式 不使用inet ntoa inet aton 类似

  • Java 6 启动画面

    我一直无法让 Java 6 启动屏幕正常工作 我已经尝试了我能想到的一切 我的manifest mf包含 Manifest Version 1 0 X COMMENT Main Class will be added automatical

  • 推断 CRTP 中模板化成员函数的返回类型

    是否可以推断 CRTP 基类中模板化成员函数的返回类型 虽然推断参数类型效果很好 但返回类型却失败了 考虑下面的例子 include

  • M1（Apple Silicon）上的 CocoaPods 失败，架构错误

    由于 ffi 问题 在 M1 MacBook 上运行 pod install 失败 如上所述here 我遵循了一些解决方法 我想我以不同的顺序尝试了所有这些方法 但现在我得到了一个略有不同的错误 LoadError dlopen opt h

  • 将 java.util.Calendar ISO 8601 格式转换为 java.sql.Timestamp

    我有一个 ISO 8601 日期格式的日期2015 09 08T01 55 28Z 我使用此代码将 ISO 8601 命运转换为 Calendar 对象 Calendar cal javax xml bind DatatypeConvert

  • 如何在SQL表中插入默认值？

    我有一个这样的表 create table1 field1 int field2 int default 5557 field3 int default 1337 field4 int default 1337 我想插入具有 field2

  • 将浮点数转换为字符串的最快 C++ 方法

    我遇到了将浮点数转换为字符串的问题to string对我来说太慢了 因为我的数据可能涉及几百万个浮点数 我已经有了解决方案如何快速写出这些数据 然而 在解决这个问题之后 我很快意识到浮点到字符串的转换正在留下很大的影响 那么 除了使用其他非

  • SVG 中的 HTML

    我想在一个文件中添加一些 HTML 标记SVG绘画 据我所知 这是不可能的SVG 图像显示在浏览器中 有没有办法画HTML上面的SVG 因为我想使用CSS table特点HTML the SVG

  • 如何以编程方式创建给定网站的屏幕截图？

    我希望能够创建给定网站的屏幕截图 但该网站可能大于屏幕上可以查看的大小 我有办法做到这一点吗 目标是在 WinForms 应用程序中使用 C 中的 NET 来完成此操作 有一些工具 问题是 您需要在某个给定的程序中渲染它 并拍摄它的快照 我

  • Eclipse 选项卡损坏了如何修复？

    我刚刚下载了 eclipse 但它显示的语言是错误的 我该如何解决这个问题 这是由 Windows 中的字体设置引起的 它描述于thisEclipse 错误报告 由于不是 Eclipse 错误而关闭 您应该能够在 Eclipse 中通过更改

  • CakePHP 中的模型可以有多个表吗？

    CakePHP 中的模型可以有多个表吗 从说明书上这句话猜测 模型通常是数据库的访问点 更具体地说 是数据库中某个表的访问点 默认情况下 每个模型都使用其名称的复数形式的表 即 User 模型使用 users 表 我不这么认为 但你可以建立

  • PHP 中参数类型可以特化吗

    假设我们有以下两个类 abstract class Foo public abstract function run TypeA object class Bar extends Foo public function run TypeB

  • 如何自动缩放字体大小以适应 div 的内容？

    我有一个带有一些文本的 div div style width 50px With some text in it div 如何缩放文本的字体大小以使所有文本都可见 反之亦然 您可以将文本包装在内部 DIV 中 并使用 JavaScript

热门标签