如何更改字体大小以适应按钮大小 [英] How to make font size change to fit button size

查看:142
本文介绍了如何更改字体大小以适应按钮大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个固定大小的asp按钮。

在运行期间我设置了按钮的文本。文字可能很短或很长。

如果文字很短,我希望按钮的字体大小更大,以适应按钮大小

和文字很长我希望字体大小更小

我用css在多行中包装长文本但它没有显示所有长文本。所以字体大小需要更小。



有什么建议吗?



我有什么试过:



< style type =text / css> 

.wrap {white-space:normal;字体大小:大;宽度:100像素;身高:50px; }

< / style>





< asp:Button ID =btnCat1runat =serverText = 按钮
OnClick =catClickCssClass =wrap/>

解决方案

你还包含了C# (可能适用于ASP.NET?):



使用适用于字符串对象的GetTextExtent函数。从您希望的最大字体大小开始。如果范围太大,请缩小字体并再次测量。循环执行直到字体足够小以适应分配的空间。



你可以拥有2个css类,其中包括小字体和大字体可以尝试如下



 Button1.Text =   SET_YOUR_BUTTON_TEXT; 
// 您可以查看类似文本长度是否更多的内容..
Button1.CssClass = Button1.Text.Length > 10 btnSmall btnBig;


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"  />

解决方案

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.


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

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";


这篇关于如何更改字体大小以适应按钮大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆