How to Make Text Wrap in a Fixed-Width HTML Button?

Wrap Text in Buttons with Fixed Width

If you encounter an issue where an HTML button with a fixed width doesn't wrap its text, consider using the following approach:

Fixed Width Button with Wrapping Text

You can grant the button its word-wrapping capability by utilizing the white-space CSS property. By setting white-space: normal, you instruct the browser to break the text as it would regular text outside of a button.

Example:

<code class="css">td.category_column input[type="submit"] {
  white-space: normal;
  /* Other CSS styles */
}</code>

Explanation:

The provided code example adds white-space: normal to the CSS class applied to the button in the original HTML snippet. This modifies the behavior of the button while retaining the fixed width and other styling. As a result, the text within the button will now wrap as it would in a typical table cell.

The above is the detailed content of How to Make Text Wrap in a Fixed-Width HTML Button?. For more information, please follow other related articles on the PHP Chinese website!