0

I have a div with a class myid_print_duo_college.

.myid_print_duo_college
{
    z-index: 1;
    position: absolute;
    left: 12px;
    top: 365px;
    color: #0C6A13;
    width: 246px;
    height: 31px;
    line-height: 30px;
    text-align: center;  
    font-weight: bold;
    font-size: 18px;
    font-family: "Cooper Std Black";   
    border: 1px solid black;      
}

The layout turnouts good , when the text is just short. See image below:

enter image description here

But when the text is long, the layout will be messed up like the image below:

enter image description here

How will I automatically adjust the font size of the text in order to fit in a div?

alyssaeliyah
  • 2,214
  • 6
  • 33
  • 80
  • possible duplicate of [Font scaling based on width of container](http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container) – Anthony Jun 05 '15 at 07:30
  • http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container , http://stackoverflow.com/questions/14431411/pure-css-to-make-font-size-responsive-based-on-dynamic-amount-of-characters – Anthony Jun 05 '15 at 07:30
  • Use `vw` units for `font-size` , https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths – Anthony Jun 05 '15 at 07:31
  • Example with `vw` : http://jsfiddle.net/mjzuakcn/1/ – Anthony Jun 05 '15 at 07:36
  • For font resizing to fit a fixed-width container, see: http://stackoverflow.com/questions/30940499/text-size-auto-resizing-on-div-width/30960832#30960832 – m69's been on strike for years Jun 21 '15 at 03:08

0 Answers0