How to wrap Text in a button?

[natoskiii]

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]

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

[natoskiii]

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]

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]

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]

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

[natoskiii]

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]

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]

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]

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]

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