提问者:小点点

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


是否可以使font-size参数依赖于文本的长度?当然,我可以意识到使用JavaScript是可能的,但我不想这样做。;)

我有一个宽高140px的盒子。内容应为100px w+h(箱体填充物:20px)。我的文本应该使用这个100px宽度最好。同样,在页面上的文本更改(AJAX)中,文本应该分配为width=100px。

有可能吗?


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