0

I'm having problem trying to fit a long text inside a box. I can't change the size of the box due to client's design specification so I have to get the text to fit the box instead. It can be achieved with html css js or jquery it doesn't matter as long as I get to the desired effect.

Here's my JSFiddle

<div class="mybutton">
  <div class="myproblem">
    MyNameIs30CharactersLong
  </div>
  <div class="myproblem2">
    MyNameIsShort
  </div>
</div>

Here's a screenshot of what I'm trying to achieve:

enter image description here

Here's how it is with a long name:

enter image description here

Thank you for your help!

Gui
  • 65
  • 1
  • 14
  • Set your font size according to percentage, or according to viewport. – Satej S Jan 20 '16 at 04:01
  • If my user has a short name it fits the box, if my user has a really long name it doesn't fit and overflow as you guys see above, I don't want the box to re-size, I want the text to shrink and fit the box. viewport wouldn't help bc we're not talking about resolutions. I don't think it's a duplicate since the other solutions didn't solve my problem Anthony. – Gui Jan 20 '16 at 04:02
  • http://stackoverflow.com/questions/14431411/pure-css-to-make-font-size-responsive-based-on-dynamic-amount-of-characters -- this answer mentions using `vw` units for pure CSS solution. – Anthony Jan 20 '16 at 04:02

1 Answers1

0

http://jquery-textfill.github.io/

This might help your issue with text resizing.

Deepak Devadiga
  • 56
  • 4