How to Make Text Wrap in Fixed-Width HTML Buttons?

How to Control Text Wrapping in Fixed-Width HTML Buttons

In HTML buttons with a predefined width, text often remains unbreakable, leading to awkward truncation. This article explores a solution to this issue, enabling the seamless wrapping of button text like table cells.

One failed approach involves using the word-wrap property. While it may seem intuitive, it can result in words being cut off mid-character.

Instead, the key lies in the white-space CSS property. Setting it to normal for the button allows the text to break as it would in regular text:

<code class="css">white-space: normal;</code>

Consider the following button:

<code class="html"><input type="submit" ... style="width: 200px; white-space: normal;">Roos Sturingen / Sensors</input></code>

With the white-space property set to normal, the text will wrap gracefully within the fixed width, avoiding unsightly word segmentation.

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