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;
}