Word Wrapping for Button with Specified Width in IE7

Word wrapping for button with specified width in ie7?

I have a similar problem with buttons containing dynamic localized strings.

The best solution would probably be not to use the <button> tag at all. You can replace it with <a> tags styled as buttons. IE seems to handle wrapping fine in that case.

In my case, thats not an easy option. So I made a polyfill that patches the IE rendering:

http://jsfiddle.net/dmitrytorba/dZyzr/247/

var buttons = document.getElementsByTagName('button');
for(var j=0; j < buttons.length; j++) {
    var button = buttons[j];
    var textNode = button;
    while(textNode.children[0]) {
        textNode = textNode.children[0];
    }
    var text, words, numSplits;
    var spacing = 0;
            while(button.scrollWidth !== 0 && button.clientWidth !== 0 &&
                  button.scrollWidth > button.clientWidth) {
        if(!spacing) {
            text = textNode.innerHTML;
            words = text.split(' ');
            numSplits = Math.ceil(button.scrollWidth / button.clientWidth);
            spacing = Math.round((words.length)/numSplits);
        }
        for(var i = spacing; i < words.length; i+=spacing+1) {
            words.splice(i , 0, '<br />');
        }          
        textNode.innerHTML = words.join(' ');
        spacing--;
        words = text.split(' ');
    }
}

Wrap text to width of browser or specified width, whichever is less

You could set the max-width property in your css.

That way, the page will expand until a certain point and then no more.

Example:

.mainDiv{
    max-width:700px;
}

Working example: http://jsfiddle.net/Pa5JG/

More info on max-width: http://reference.sitepoint.com/css/max-width

Suppress button wrap in button group after fitting cell width dynamically

Adding this css decleration will fix any issues with table cells wrapping button groups.

.btn-group {
  display: flex;
}

Explanation:
This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children. By default, flex items will all try to fit onto one line.

CSS: white-space: nowrap does not seems to work in IE

For IE 6 and 7 you need to wrap your text with a <span> tag and give it a white-space property. Since you already have a <span> tag wrapped around your text and you have a class for it, just add the white-space property to your <span> class .linkColor.

.linkColor{
    white-space:nowrap;
}

Check working example at http://jsfiddle.net/ux4DD/1/

Wrap text within a asp:Button

You can do that by setting a width and the CSS property white-space: normal:

This goes in your <head>

<style type="text/css">
    .wrap { white-space: normal; width: 100px; }
</style>

And your button:

<asp:Button ID="btn" runat="server" Text="some really breally long text that I want to wrap" CssClass="wrap" />

Make two buttons the same width as the longest one

As your button are on top of onw another you can wrap buttons with div and have inline-flex and direction column to maintain equal sizes for button

.wrapper{
  display: inline-flex;
  flex-direction: column;
}
.btn--primary {
  display: block;
  padding:0 1em;
  text-align:center;
  align-items: center;
  height:50px;
  width: auto;
  border: 1px solid red;
}

<div class="wrapper">
  <a class="btn--primary" href="#">Quick simulation lorem ipsum dor emit</a>  <a class="btn--primary" href="#">New patient</a>
</div>

Word Wrapping for Button with Specified Width in IE7