如何将文本预先放入矩形DIV中？

Question

我有一个狭窄的矩形Div，我想将文字渲染成。通常，它看起来像这样：

但是，我想最大化可读性的大小，并且由于文本是动态提供的，我偶然发现BigText，这给了我这个：

它适用于宽度，但完全忽略了div的高度！如何在<DIV>的宽度和高度范围内最大化文本大小？

JS小提琴：http://jsfiddle.net/Q7gcb/8/

Answer 1

我删除了<b>标记，并使用以下内容设置了span元素的样式：

jsFiddle example - 似乎就是你想要的（使用em s它将适用于所有font-size s）

span {
    display: block;
    margin-top: -.5em;
    font-weight:bold;
}

Answer 2

问题是您为height .namebox元素设置了div。如果您将其留空，div将自动变为文本的大小。不需要任何花哨的东西。

div.namebox
{
position:absolute;
background-color:Yellow;
text-align:center;
font-family:"Gabriola";
font-size: 50px;
top:27px;
left:22px;
width: 184px;
height: ;*------------0 height-------------------*/
z-index: -1; 
white-space:nowrap;
}

DEMO HERE

Answer 3

尝试为height:inherit课提供height:38px而不是div.namebox。 CSS如下

div.namebox
{
    position:absolute;
    background-color:Yellow;
    text-align:center;
    font-family:"Gabriola";
    font-size: 50px;
    top:27px;
    left:22px;
    width: 184px;
    height: inherit;
    z-index: -1; 
    white-space:nowrap;
}