是否可以使font-size参数依赖于文本的长度?当然,我可以意识到使用JavaScript是可能的,但我不想这样做。;)
我有一个宽高140px的盒子。内容应为100px w+h(箱体填充物:20px)。我的文本应该使用这个100px宽度最好。同样,在页面上的文本更改(AJAX)中,文本应该分配为width=100px。
有可能吗?
如果您事先知道文本的长度,那么您可以根据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或以不同的方式处理解决方案。