Question

是否可以使font-size参数取决于文本的长度？当然我可以意识到这可以用JavaScript，但我不想。 ;）

我有一个140px宽度和高度的盒子。内容应为100px w + h（盒子的填充：20px）。我的文字最好使用100px宽度。此外，在页面上的文本更改（AJAX）上，文本应分配给width = 100px。

这可能吗？

Answer 1

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

@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或稍微改变一下解决方案。

CSS：可变字体大小取决于文本长度

1 个答案: