Home  >  Article  >  Web Front-end  >  How to Make Text Wrap in a Fixed-Width HTML Button?

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

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-30 16:08:52406browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn