Question

根据DIV中的文本数量，有什么方法可以使用CSS缩放文本。

我在http://www.directiongroup.com/tweethearts/创建了这个页面，文本的CSS是（固定大小为32px）：

.jta鸣叫文本

{
    color: #ed1c24;
    font-size: 32px;
    text-transform: uppercase;
    line-height: 30px;
    font-weight: normal;
    font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
    text-shadow: 0px 1px 0px #FFFFFF;
}

非常感谢

Answer 1

你不能单独使用CSS，但你可以使用一点Jvascript。

计算文本中的字符数并根据需要设置CSS font-size属性。

以下是使用jQuery的快速示例：http://jsfiddle.net/pjByL/

$('.heart').each(function(){
var textLength = $(this).text().length
    if(textLength > 26)
    {
       $(this).css('font-size', '10px');
    }
});

Answer 2

你无法通过css实现这一目标，你必须使用java scrip来进行此项检查，这可能会对你有所帮助

http://fittextjs.com/

Answer 3

编辑：由'couzzi'回答

css for double height text and double width text in font style

包含变换和变换原点的所有供应商前缀的小提琴：http://jsfiddle.net/LTaAy/1/

<强> HTML

  <p class="doubleWidth">DOUBLE WIDTH</p>
  <p class="doubleHeight">Double Height</p>
  <p class="doubleWidthandHeight">Double Width and Height</p>

<强> CSS

p {
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
}
p.doubleWidth {
    -webkit-transform: scaleX(2);
    -moz-transform: scaleX(2);
}
p.doubleHeight {
    -webkit-transform: scaleY(2);
    -moz-transform: scaleY(2);
}
p.doubleWidthandHeight {
    -webkit-transform: scaleX(2) scaleY(2);
    -moz-transform: scaleX(2) scaleY(2);
}

Answer 4

这个问题虽然陈旧但仍然在搜索结果中排名第一，所以我会发布一个现代答案。

如果您在CSS中以视口（vw）为单位指定字体大小，则会自动缩放字体而不使用javascript

CSS

font-size: 23vw;

有关详细规范和其他选项，请阅读W3.org规范here。

使用CSS缩放文本

4 个答案:

http://fittextjs.com/