如何自动缩放字体大小以适应 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(使用前将#替换为@)

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

  • jQuery 面板滑块通过单击按钮打开但不会关闭

    我的页面上有一个按钮 可以使用 jquery 和 Modernizr 框架打开右侧面板 按钮位于屏幕最右侧 单击时 它会向左滑动并打开打开的面板 问题是 再次单击时它不会滑回到原来的位置 HTML div class cd panel fr
  • 自动调整元素 (div) 大小以适合水平内容

    我尝试谷歌搜索 但没有得到太多结果 我正在构建一个水平轮播 它在浮动的 LI 中显示图像 我想解决的问题是 每次我向轮播添加缩略图 我是延迟加载 时 我都需要重新计算轮播的宽度 以便所有浮动缩略图很好地并排排列 其一 我宁愿不必在 JS 中
  • IE 中的文件上传按钮和奇怪的文本光标行为

    我构建了一个上传按钮 其格式类似于典型的 html 按钮 而不是浏览器标准文件上传表单 该方法是设置锚元素的样式并在顶部覆盖透明文件输入元素 这种方法在除 IE 之外的所有浏览器中都可以正常工作 在 IE 中 当用户单击上传按钮时 会出现一
  • 如何在CSS中选择多个id?

    如何在 CSS 中选择多个 ID 例如 test id div div div div Use an 属性选择器 https developer mozilla org en docs Web CSS Attribute selectors
  • Ie11 不应用媒体查询样式

    IE11 忽略我的媒体查询并始终使用移动 CSS 奇怪的是 如果我改变浏览器宽度 即使只是 1 2 像素 浏览器也会自行渲染并显示媒体查询 我尝试了 css lint 我的 css 中没有错误 我的CSS没有什么特别的 只是简单的 css
  • Firefox 无法正确渲染:border-radius、box-shadow 和 border

    在下面的例子中 http jsfiddle net Du8f6 3 http jsfiddle net Du8f6 3 我将内部阴影设置为容器和 10px 边框 并将边框半径设置为 50 结果是容器边框外有奇怪的细白色边框 细白色边框在以下
  • 如何使 html 链接看起来像一个按钮?

    我正在使用 ASP NET 我的一些按钮只执行重定向 我宁愿它们是普通链接 但我不希望我的用户注意到外观上有太大差异 我考虑过用锚点 即标签 包裹的图像 但我不想每次更改按钮上的文本时都必须启动图像编辑器 将这个类应用到它上面 button
  • 如何自定义 Angular Material 的 input/md-input-container 组件?

    正如标题所述 我如何自定义这些元素 他们似乎使用透明背景 这在大多数背景调色板上很难查看 在 angular material css 后添加一个空白 css 文件 并在该空白 css 文件中覆盖您要自定义的规则 对于您面临的问题 我在 c
  • d3 序数尺度的映射

    我正在使用 D3 的序数比例将数字映射到颜色 我用过这个 color d3 scale ordinal range 1f77b4 ff7f0e 2ca02c d62728 9467bd 8c564b e377c2 domain 0 6 co
  • 在文档流中提取一个元素

    这是示例代码 top background lightGreen content outline 1px solid red bottom background lightBlue div Top div div Lorem ipsum d
  • 如何使 CSS 动画/过渡以固定速度而不是固定持续时间播放? [复制]

    这个问题在这里已经有答案了 我有一个 CSS 动画 可以使元素沿直线移动未定义的距离 据我所知 动画具有固定的持续时间 因此无论元素必须移动多远 动画始终需要相同的时间来运行 我该如何制作才能使动画没有固定的duration 但有固定的运动
  • AJAX 加载的图像在 Safari 中无法正确显示

    因此 我使用 AJAX 加载每个页面的内容并将其注入当前页面 在 Chrome Firefox Internet Explorer 上一切都运行良好 尽其所能 哈哈 并且除了两个奇怪的部分之外 内容在 Safari 上加载良好 通过 AJA
  • Google 字体(上面有空格)无法在 IE7/IE8 上呈现

    有谁知道为什么 IE7 IE8 不会渲染 Google 字体 如果名称上有空格 您可以在这里查看演示 http jsfiddle net fYzAb 1 http jsfiddle net fYzAb 1 完全相同的两个标签 一个使用 Os
  • 如何将 ng-repeat 分成批次

    我正在做这个 ref checkbox 示例http getbootstrap com javascript buttons examples http getbootstrap com javascript buttons example
  • 如何将安全中心与 Flexbox 一起使用?

    居中的弹性盒项目可能会出现不良行为当他们溢出容器时 https stackoverflow com questions 33454533 cant scroll to top of flex item that is overflowing
  • 固定 CSS 导航栏

    我最近解决了困扰我一段时间的 CSS 导航栏问题 现在我遇到了将其固定到顶部的问题 以便当您滚动页面时它会向下滚动 我知道我需要添加的是 Position fixed 但我不知道在哪里添加它 我最近的尝试导致文本被修复 但导航栏的背景却没有
  • 两个单独表格上的 Td 高度

    我有两个单独的表 我在每个 tr 上使用焦点 悬停函数 该函数同时在两个表上都很好用 我的问题是 td 高度 因为如果第一个表中 td 的描述更大 将显示在中的两行上相同的td和td的高度将被修改 但仅限于第一个表td 如何记住第一个表中
  • 推迟未使用的 CSS

    我有一个关键的 CSS 流程 可以防止页面首屏内容出现无样式内容闪现 FOUC 我陷入了 推迟未使用的 CSS 这一点 Google PageSpeed 见解 灯塔 和 或 Chrome 的性能审核强调了这一点 我已经阅读了其他文章 但它们
  • 不透明度如何影响元素顺序?

    我发现 CSS 有一个非常奇怪的行为opacity与浮动元素相结合 考虑以下 HTML div div Right button div div div Overlay div 最后div将覆盖前两个浮动的 删除不透明度会将最新的 div
  • Bootstrap 响应式图像缩放

    Using Twitter Bootstrap我意识到默认情况下它会响应式地缩放图像 这很棒 但并不总是完美的 比如说我有一个500x300桌面上的图像 然后它会针对移动设备调整大小 该图像将非常小而且不是很高 会丢失图像的大部分细节部分

随机推荐

  • 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