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

Question

我有一个圆形 div，里面有一个长文本，如果圆形 div 很大，但是当 div 的大小减小时，文本会溢出。这是小提琴

我希望文本适合此 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 高度

重置子（文本）元素的行高。

小提琴

标记

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

Answer 2

<style>
.circle {
   background-color: #FF0000;
   padding: 50px;
   display: inline-block;
   -moz-border-radius:50%;
   -webkit-border-radius: 50%;
   border-radius:50%; 
}
</style>

<div class="circle">hello</div>