调整字体大小以适合div（一行）

  • Z时代
  • 2024-01-10
  • 分类：问答

有人问过类似的问题，但是解决方案确实与我正在尝试做的事情相吻合。基本上，我有一篇标题为（<h1>）的文章。我不想控制标题的长度，但是我也不想标题显示在多行上。CSS或jQuery是否可以根据<div>标签的宽度来调整文本大小？

我知道如果可以检测到文本与边缘的重叠，我将如何处理伪代码<div>：

var fontize = $("#title").css("font-size");
var i = /*remove unit from integer*/
while( /*text overlaps div*/ ){
    $("#title").css("font-size", --i+"pt");
}

如果有一个CSS属性，我可以设置为更好，但是我似乎找不到（在这种情况下，溢出不会起作用）。

回答：

回答：

您无法使用CSS进行此操作，但是可以在javascript /

jQuery中进行。为了帮助您使用伪代码，因为您已经知道该怎么做。只是您不知道如何检测多余的宽度。

最好的方法是使DIV具有以下（至少）样式：

position: absolute;
visibility: hidden;
white-space: nowrap;
font-family: /* same as your title's */

然后将文本复制到该文本并设置一些起始字体大小。然后，您可以遍历while循环，并在div的宽度合适时停止。然后将计算出的字体大小设置为原始标题。

这样，该检查将对用户不可见，因此也将更快地工作。

：这是自动增长textarea脚本工作的通常方式。他们使用虚拟div，其样式设置与原始文本区域相同，并在用户键入文本时调整区域的高度。因此，起初“文本”区域可能很小，但是如果用户键入大量文本，它将自动增长以容纳内容。

回答：

您可以通过以下方法优化while循环，以大大减少迭代次数：

  1. 设置起始字体大小。

  2. 得到测试DIV的宽度。

  3. 计算orig_div和test_div之间的宽度因子。

  4. 以此大小调整字体大小，而不是增加/减少一个单位

  5. 测试test_div宽度

以上是 调整字体大小以适合div（一行） 的全部内容， 来源链接： utcz.com/qa/423551.html

回到顶部