CSS：将字体设置为某种大小，以使文本占据整个容器 [英] CSS: Set font to a size so the text would occupy whole container

问题描述

可能重复：

。

解决方案

这不是蛮力;）

HTML：

 < span id = txt> Lorem< / span> ; 
< div id = card>< / div> 
  

CSS：

  #card {
 width：150px; 
高度：50像素； 
边框：1像素纯黑色
} 
 
 #txt {
显示：无
} 
  

JS（使用JQuery）：

  var size_w =（ 150 / $（'＃txt'）。width（）-0.05）; 
 var size_h =（50 / $（’＃txt’）。height（）-0.05）; 
 var size = size_w> size_h？size_h：size_w; 
 $（'＃card'）。css（'font-size'，size +'em'）; 
 $（’＃card’）。text（$（’＃txt’）。text（））; 
  

在这里拨弄： http://jsfiddle.net/cwfDr/

好的，现在它涵盖了高度和宽度。 ;）

Possible Duplicate:
resize font to fit in a div (on one line)

For a small flashcard maker app I need to set the correct font size so text would fill all the available width of a fixed-size container; like the text in the four boxes in this picture:

A solution using PHP GD has been provided to this question. Is there a client side solution with css or javascript to this problem?

解决方案

it's not brute force ;)

HTML:

<span id="txt">Lorem</span>
<div id="card"></div>

CSS:

#card { 
    width: 150px; 
    height: 50px;
    border: 1px solid black 
}

#txt {
    display: none
}

JS (using JQuery):

var size_w = (150/$('#txt').width() - 0.05);
var size_h = (50/$('#txt').height() - 0.05);
var size = size_w>size_h?size_h:size_w;
$('#card').css('font-size',  size + 'em');
$('#card').text($('#txt').text());

fiddle here: http://jsfiddle.net/cwfDr/

All right, now it covers both height and width. ;)

这篇关于CSS：将字体设置为某种大小，以使文本占据整个容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！