user3376592 user3376592 - 1 month ago 4x
CSS Question

Add text inside button image and limit text to not exceed the button size

I have a button image of size 200x50 without text like this :

enter image description here.

How can I dynamically update the text inside the button like this:

enter image description here

and make sure that the button doesn't resize and the text doesn't flow anywhere outside the button? The text could either be fewer words like 'Click here' or 'Click on this button to view more details' like in the image. Also, is there a way to set the text limit based on the button size?

Thank you so much.


Maybe you're looking for something like this?

div.button {
  background-image: url('');
  height: 50px;
  width: 200px;
  text-align: center;
span.buttontext {
  width: 150px;
  height: 50px;
  margin: 0 auto;
  margin-left: 45px;
  padding-top: 15px;
  color: #ffffff;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden
<div class="button">
  <span class="buttontext">Click Here Now! It has a lot of text, but it won't show!</span>

Keep in mind, you may want to consider other ways of creating buttons. My favorite way is with pure CSS :-) Check out this cool guide for more info on that.