...

View Full Version : Altering text size to fit set button width.



Jenny Dithe
04-05-2011, 05:35 PM
I have buttons which are populated with the names of members. The width of the button is preset - if I don't the website looks messy.

But members names could be:
John Doe or
Wellington Napoleon Archibald

So John Doe will display fine, but the second name would display Wellington N, getting cut off when it reached the preset width of the button.

How can I alter the text width to automatically fit the size of the button?

Here is the css code I am using for the button:


.button3:hover {background-color:#778899; font-size:70%; text-decoration:none; color:white; border:2px solid #f00000; width:10em}


As you can see I tried to make the font-size a percentage but this seems to work for height not width.

oesxyl
04-05-2011, 06:29 PM
I have buttons which are populated with the names of members. The width of the button is preset - if I don't the website looks messy.

But members names could be:
John Doe or
Wellington Napoleon Archibald

So John Doe will display fine, but the second name would display Wellington N, getting cut off when it reached the preset width of the button.

How can I alter the text width to automatically fit the size of the button?

Here is the css code I am using for the button:


.button3:hover {background-color:#778899; font-size:70%; text-decoration:none; color:white; border:2px solid #f00000; width:10em}


As you can see I tried to make the font-size a percentage but this seems to work for height not width.
remove the width: 10em, this force the width of the button to be 10 times as width of a 'm' no matter what font or size for it you use.

http://reference.sitepoint.com/css/lengthunits

another options is to use a bigger value for width.

best regards

Jenny Dithe
04-05-2011, 07:31 PM
Thank you.

For lay out purposes I would quite like to keep the size 10 em, but I gather I need to make a choice as there's no way to automatically shrink the text to fit a pre-set width.

MissPhoenix
04-05-2011, 08:01 PM
You have several options as well:

1. You can change the width of the button to hold the longest name in your database.
2. You can change the button to adjust to the width of the name.
3. You can limit the amount of characters of each name that is displayed.

Jenny Dithe
04-05-2011, 08:05 PM
Thank you. That is pretty conclusive. I'll keep it as is then.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum