当前位置: 首页 > 面试题库 >

纯CSS,可根据动态字符数量对字体大小做出响应

长孙高远
2023-03-14
问题内容

我知道可以使用Javascript轻松解决此问题,但是我只对纯CSS解决方案感兴趣。

我想要一种动态调整文本大小的方法,以使其始终适合固定的div。这是示例标记:

<div style="width: 200px; height: 1em; overflow: hidden;">

  <p>Some sample dynamic amount of text here</p>

</div>

我在想,也许可以通过在ems中指定容器的宽度,并让font-size继承该值来实现?


问题答案:

我刚刚发现,使用大众汽车是可能的。它们是与设置视口宽度相关的单位。有一些缺点,例如缺乏对旧版浏览器的支持,但这绝对是认真考虑使用的东西。另外,您仍然可以为旧版浏览器提供后备广告,例如:

p {
    font-size: 30px;
    font-size: 3.5vw;
}


 类似资料:
  • 我使用Zurb Foundation3网格创建了一个站点。每个页面都有一个大的: null null 当我将浏览器的大小调整为移动大小时,大字体不会调整,并导致浏览器包括一个水平滚动以适应大文本。 我注意到,在Zurb Foundation 3排版示例页面上,头适应浏览器的压缩和扩展。 我是不是错过了一些很明显的东西?我如何实现这一点?

  • 问题内容: 它由9个框组成,中间带有文本。我已经制作了框,以便它们可以随着屏幕大小的变化而调整大小,以便始终保持在同一位置。 但是,即使我使用百分比,文本也不会调整大小。 如何调整文本的大小,使其在整个页面上始终具有相同的比例? 这是处理多种分辨率的合适解决方案吗?还是我应该在CSS中进行很多检查并为每种媒体类型设置许多布局? ``` html, body { } #launchmain { }

  • 我希望通过将绘图标题字体大小从增加到。 我的绘图从matplotlibrc文件中获取基本字体大小和修改器。这通常是这样表达的: 现在,对于我的一个图,我想增加标题字体大小,特别是。如果这是一个数字(例如线宽),我可以这样做: 但这不会像那样容易。当然,我可以使用字典或一系列elif语句——但我在想matplotlib,知道如何解释这些字符串,也许也有一些递增它们的功能。你知道这种事吗? 编辑:有人

  • 我需要在图像上设置文本。包含图像的image\div的大小是固定的。我在图像上方得到一些输入,用户可以插入一些文本。文本通过道具注入“图像组件”,然后我需要在图像上显示它。诀窍在于文本有固定的位置。在图像的底部。当然,文本不应溢出图像边框,并且需要最大跨度。我的意思是,如果文本是“短的”(少量字符),那么使用java脚本函数,字体大小应该增加,反之亦然。 我的函数的问题是不够“灵活”,字体大小和文

  • 问题内容: 我有一个具有%宽度和高度的容器,因此它可以根据外部因素进行缩放。我希望容器内的字体相对于容器的大小是恒定的。有没有什么好方法可以使用CSS做到这一点?将根据原来的字体尺寸(这将是100%)将只缩放字体。 问题答案: 您也许可以使用CSS3通过计算来做到这一点,但是使用JavaScript可能更安全。 使用JS,您可以更改文本的高度,然后在调整大小的过程中将相同的计算简单地绑定到调整大小

  • 我有一个java应用程序-一个计算器。我想通过调整应用程序窗口的大小来动态调整按钮的字体大小。如何实现? 我的想法是使用ComponentEvents。我有应用程序窗口的初始大小和初始字体的大小。我想根据按钮的大小改变字体大小,受窗口大小变化的影响。问题是如何在覆盖方法中使用比例[初始窗口大小]/[初始字体大小]?每个字体的比例都不同。