CSS：取决于文本长度的可变字体大小[重复]

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或以不同的方式处理解决方案。