I needed to wrap text inside my buttons so I found this solution: How

Question

0

Editorial Team

Asked: May 27, 20262026-05-27T20:51:00+00:00 2026-05-27T20:51:00+00:00

I needed to wrap text inside my buttons so I found this solution: How

0

I needed to wrap text inside my buttons so I found this solution:

How to wrap text of html button with fixed width

However, after applying the solution I noticed that the vertical alignment of buttons changes. Here is the screenshot:

Here is the code:

<html>
<head>
    <title>Button Wrap</title>

    <style type="text/css">

        INPUT.StandardButton
        {           
            WIDTH: 87px; 
            HEIGHT: 38px;
            font-size: 10pt; 
            Font-weight: bold;                      
            cursor: pointer;
            FONT-FAMILY: Arial, Verdana;
            COLOR: #0049A5;                                 
        }

    </style>

<head>
<body>

    <input type="button" value="NoWrap" class="StandardButton" />
    <input type="button" value="This is Test 1" class="StandardButton" style="white-space: normal;" />
    <input type="button" value="This is Test 2" class="StandardButton" style="white-space: normal;"  />
    <input type="button" value="This is Test 3" class="StandardButton" style="white-space: normal;" />

</body>
</html>

Any idea what is causing the alignment change? Thanks!