How to make font size change to fit button size

Question

2.00/5 (1 vote)

See more:

I have an asp button with fixed size.
during run time I set the button's text. the text may be short or long.
If the text is short I want font size of the button to be larger to fit the button size
and when the text is long I want the font size to be smaller
I have used css to wrap long text in multi lines but it doesn't show all long text. so the font size needs to be smaller.

Any advice?

What I have tried:

<style type="text/css">

   .wrap { white-space: normal; Font-Size:large ; Width:100px; Height: 50px; }

   </style>

<asp:Button ID="btnCat1" runat="server" Text="Button"  
                             OnClick="catClick"  CssClass="wrap"  />

Posted 27-Apr-17 5:08am

M. Daban

Updated 28-Apr-17 4:16am

Add a Solution

2 solutions

Solution 3

You can have 2 css class with small and big font size and may try like below

C#

Button1.Text = "SET_YOUR_BUTTON_TEXT";    
//you can check something like to see if text length is more..
Button1.CssClass = Button1.Text.Length > 10 ? "btnSmall" : "btnBig";

Posted 27-Apr-17 5:25am

User 4180254

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

W∴ Balboos, *GHB* · Accepted Answer · 2017-04-27T05:19:00

Solution 2

You also included C# in this (possibly applies to ASP.NET?):

Use the function for GetTextExtent that applies to your string object. Start with your maximum desired font size. If the extent is too large, shrink the font and measure again. Do in loop until the font is small enough to fit the allocated space.

Posted 27-Apr-17 5:19am

W∴ Balboos, GHB

Comments

M. Daban 27-Apr-17 17:35pm

that looks good, but could you explain how to use it, please?

W∴ Balboos, GHB 28-Apr-17 7:03am

I've used this (C++.NET, 2D Graphics - C# is nearly identical) to scale a font so a headline always fit and filled the top line of a page.

You need to know how long the length of the text you wish to put on your button will be. Depending upon your context, there's a method you can use to measure the length of a string object to be, for example, printed. This takes into account the font in use. What I do is measure the length of the string (a getTextExtent procedure) and see if it fits the width of the page (or in your case, button). If it's too big I create a smaller font to apply to the object, and keep shrinking the font until the object is small enough. This gives the best possible fit.

But this method takes some work.

The suggestion by Vinod Jangle is less elegant but much simpler. His is for HTML pages. You could do a similar thing for any language but the fit will only occasionally be optimal.

Another possibility: if you use a monospace font then the letters and the spacing are constant. If you get the char width for a the monospace font you use you can calculate the length of the string as char width * char count. Keep a small table of char widths for each size of the font you wish to use and then divide the space available by the character count for an approximate value for the char width.

Lots of solutions - you exchange simplicity for accuracy when you choose a method.