How to wrap Text in a button?

natoskiii · #1 Oct 27th, 2007, 15:55

Hi,

I need to wrap the text of button so that it fits in the button's fixed width and doesn't expand the button's width, only it's height.

This can be done in a regular text using the WORD-BREAK:BREAK-ALL; attribute
But I tried this on the button and it's not working?

Is there any work around for that? any css attribute?

Stuart · #2 Oct 27th, 2007, 16:25

Is the button a normal input (<input type=button>)? If not, could you tell us what it is?

natoskiii · #3 Oct 28th, 2007, 05:56

Yes it's a normal submit button

<input type=button value="ssssssssssssssssss">

and I have the button size like 10px for instance. I don't want the button to expand, I need to wrap the button's value to fit into the button's specified width

Stuart · #4 Oct 28th, 2007, 13:30

If you want to write endless text without the width changing, you need to use css. Try this:

Code: Select all

.mybutton {
width: 10px;
}


<input type="button" class="mybutton" value="abc...">

If that does not work, I have another idea.

natoskiii · #5 Oct 29th, 2007, 06:06

It doesn't work cause when you specify a width, the rest of the word won't appear

like if u have a value of 'ssssssssssssssssss' and your button's width is like 3px , only the first 3 characters will appear.

Monie · #6 Oct 29th, 2007, 06:13

So don't specify the button width! Let the button width determined by the button value..

natoskiii · #7 Oct 29th, 2007, 06:45

Hi,
The problem is that I need the button to be of fixed size and wrap the text inside it, so that it doesn't expand as it'll affect my page's layout

Monie · #8 Oct 29th, 2007, 06:58

Quote:

Originally Posted by natoskiii

It doesn't work cause when you specify a width, the rest of the word won't appear

like if u have a value of 'ssssssssssssssssss' and your button's width is like 3px , only the first 3 characters will appear.

What actually do you want your button to be?
Of course if your button value is "ssssssssssssssssss", the button sure will be wider!

But you want all of them to appear in your button tho...
If you want a fixed width button, set the width as mention by swagner, and adjust your button value or,
change your button onto an image button.

Lucleonhart · #9 Oct 29th, 2007, 08:53

You say you have an <input type="button"> .. so it is actually a normal button.
So try this alternative

HTML: Select all

<button style="width:100px; height:100px;">I am a<br>wrapped text</button>

Stuart · #10 Oct 29th, 2007, 21:43

Yup, that is what I would have suggested next. Just use

HTML: Select all

<button>Text<br>Text</button>

Lucleonhart also mentioned using style="" to format the width, but you can also use the css styling I suggested in my previous post.

Stuart · #11 Nov 1st, 2007, 00:33

Please mark this thread as solved via thread tools at the top. Thanks

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How to text wrap?	Quetzal	Web Page Design	9	Jun 3rd, 2008 18:58
button text picture change	R8515198	JavaScript Forum	7	Feb 11th, 2008 12:36
Picture wrap around text? (more info inside)	KOinMotion	Web Page Design	1	Nov 13th, 2006 09:59
How to wrap text around a div	AdRock	Web Page Design	6	Sep 5th, 2006 19:02
Text wrap - widening space	gribble	Web Page Design	1	Aug 17th, 2005 03:38

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
How to wrap Text in a button?