Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post

    Altering text size to fit set button width.

    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:
    Code:
    .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.

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Jenny Dithe View Post
    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:
    Code:
    .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

  • Users who have thanked oesxyl for this post:

    Jenny Dithe (04-05-2011)

  • #3
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post
    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.

  • #4
    New Coder
    Join Date
    Oct 2010
    Location
    Norwich, CT
    Posts
    35
    Thanks
    4
    Thanked 3 Times in 3 Posts
    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.

  • Users who have thanked MissPhoenix for this post:

    Jenny Dithe (04-05-2011)

  • #5
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post
    Thank you. That is pretty conclusive. I'll keep it as is then.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •