如何使一个圆圈内的文字正确配合，其中div大小不固定？ [英] how to make a text inside a circle div fitting correctly, where div size is not fixed?

问题描述

我有圈子里面，我有一个长文本，它看起来很好，如果圆div是大的，但当div的大小减少文本溢出。
在这里是小提琴

我希望文本适合这个div。div的大小是可以改变的，所以不管div的大小如何，但文本应该相应适合.font的大小允许改变。任何帮助？

  #ff {
 width：80px; 
 height：80px; 
背景颜色：红色; 
 border-radius：100％; 
位置：绝对; 
 text-align：center; 
 line-height：80px; 
 
  

解决方案

。

在父元素上设置行高为div高度

重置子行上的行高）元素。

FIDDLE

a>

标记

 < div id =ff>< span> hello你好吗< / span>< / div> 
  

CSS

  #ff {
 width：80px; 
 height：80px; 
背景颜色：红色; 
 border-radius：100％; 
 text-align：center; 
 line-height：80px; 
} 
 span 
 {
 line-height：normal; 
 display：inline-block; 
 vertical-align：middle; 
} 
  

I have circle div inside which i have a long text it is looking fine if the circle div is big but when the size of the div is decreased the text is overflowing. here is the fiddle

I want the text to fit inside this div.the div size is changeable so no matter the div size but the text should fit accordingly.font size is allowed to change. any help?

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

解决方案

Wrap the text within another element.

Set line-height to div height on the parent element

Reset the line height on child (text) element.

FIDDLE

Markup

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

这篇关于如何使一个圆圈内的文字正确配合，其中div大小不固定？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！