jquery - 如何使圆形 div 内的文本正确适合，其中 div 大小不固定？

Question

我有一个圆形div，里面有一个很长的文本，如果圆形div很大，看起来很好，但是当div的大小减小时，文本就会溢出。 这是fiddle

我希望文本适合此 div。div 大小是可变的，因此无论 div 大小如何，但文本都应相应适合。允许更改字体大小。有什么帮助吗？

#ff{    
    width:80px;
    height:80px;
    background-color:red;
    border-radius:100%;
    position:absolute;
    text-align:center;
    line-height:80px;
}

Answer 1

将文本包裹在另一个元素内。

将 line-height 设置为父元素上的 div 高度

重置子(文本)元素的行高。

<强> FIDDLE

标记

<div id="ff"><span>hello how are you</span></div>

CSS

#ff{    
width:80px;
    height:80px;
    background-color:red;
    border-radius:100%;
    text-align:center;
    line-height:80px;
}
span
{
    line-height: normal;
    display:inline-block;
    vertical-align: middle;
}