2

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;
}
rram
  • 2,004
  • 5
  • 24
  • 37

2 Answers2

3

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;
}
Danield
  • 121,619
  • 37
  • 226
  • 255
  • can the text align in center? – rram Sep 08 '13 at 07:28
  • can we able to do this using font-size because if we reduce the div size to 40 then this problem occur again right? – rram Sep 08 '13 at 07:43
  • if you want the font size to change such that the text will always 'best-fit' the circle - then you'll need to use javascript – Danield Sep 08 '13 at 07:47
  • Read [this post](http://stackoverflow.com/q/687998/703717) and in particular [this answer](http://stackoverflow.com/a/688362/703717) – Danield Sep 08 '13 at 07:59
0
<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>
Ankit Agrawal
  • 6,034
  • 6
  • 25
  • 49