CSS：根据文本长度变化的变量字体大小

12 浏览
0 Comments

CSS：根据文本长度变化的变量字体大小

此问题已经有答案:

基于容器大小进行字体缩放

是否可以使字体大小参数取决于文本的长度？

当然，我可以使用JavaScript实现这个目标，但我不想；）

我有一个盒子，宽高为140px。内容应为100px W+H（盒子的填充：20px）。我的文本应该最好地使用这100px宽度。同时，在页面上对文本进行更改（AJAX）时，文本应该分配为width = 100px。

这是可能的吗？

admin 更改状态以发布 2023年5月24日
0

1 答案

0 Comments

如果您预先知道文本的长度，那么可以根据屏幕大小设置媒体查询，以相应地调整字体大小。

@media (max-width: 367px) {
  .myContainer {
    font-size: 8px;
  }
}
@media (min-width: 368px) and (max-width: 1024px) {
  .myContainer {
    font-size: 12px;
  }
}
@media (min-width: 1025px) {
  .myContainer {
    font-size: 16px;
  }
}

如果您使用服务器端技术动态生成文本，应该能够看到文本长度并设置适当的类来调整字体大小:

// Example pseudo-code to illustrate the point...
int len = myText.length();
if (len > 2000) {
  setOutputClass("smallestSize");
} else if (len > 1000 && len < 2000) {
  setOutputClass("mediumSize");
} else {
  setOutputClass("largestSize");
}

在您的CSS中有相应的类规则:

.smallestSize {
  font-size: 8px;
}
.mediumSize {
  font-size: 12px;
}
.largestSize {
  font-size: 16px;
}

我相当确定在CSS中无法确定文本长度，因此最终可能被迫使用JavaScript或以稍微不同的方式来解决问题。

0