How to Achieve Text Wrapping in Fixed-Width HTML Buttons?

Text Wrapping in Fixed Width HTML Buttons

Problem Statement:

Users may encounter a situation where the text within an HTML button with a fixed width doesn't wrap. Despite attempts to use word-wrap, the words are cut off even when there's space available.

Solution:

To ensure text wrapping in HTML buttons with fixed widths, utilize the CSS property:

white-space: normal;<br>

This property restores text wrapping within the button, ensuring it behaves like any other table cell.

Example:

The following snippet demonstrates the issue and solution:

<br><td class="category_column"><br>  <input type="submit" ... style="width:200px;white-space:normal;"<br>  /><br></td><br>

By setting white-space: normal;, the text will wrap within the 200px wide button, breaking at word boundaries to avoid unsightly truncation.

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