【CSS初心者向け】ボタンのテキストを折り返して見た目も機能も向上させる方法

2024-07-27

HTMLボタンの固定幅でテキストを折り返す方法（HTML & CSS）

解決策

主に以下の2つの方法で実現できます。

overflow-wrap プロパティを使用する

overflow-wrap プロパティは、要素内のテキストが境界を超えた場合の折り返し方法を制御します。このプロパティには、以下の値を指定できます。

normal：デフォルト値。単語の途中で改行せず、次の行へ送ります。
break-word：単語の途中で改行できます。
break-spaces：空白文字で区切られた部分で改行できます。

ボタン内のテキスト折り返しに最適なのは break-word です。以下の例のように、ボタンのスタイルに overflow-wrap: break-word; を追加します。

button {
  width: 100px; /* ボタン幅 */
  overflow-wrap: break-word;
}

white-space プロパティと word-break プロパティを使用する

white-space プロパティは、要素内の空白の扱い方を制御します。word-break プロパティは、white-space で nowrap を指定した場合に、単語の折り返し方法を制御します。

この方法では、まず white-space: nowrap; を設定して、ボタン内のテキストを1行に保ちます。次に、word-break: break-all; を設定して、単語の途中で改行できるようにします。

button {
  width: 100px; /* ボタン幅 */
  white-space: nowrap;
  word-break: break-all;
}

上記の方法は、いずれも単一行のテキストのみを折り返すことに注意してください。複数行のテキストを折り返したい場合は、display: flex; や flex-wrap: wrap; などのプロパティを使って、ボタンを複数行にレイアウトする必要があります。
ボタンデザインによっては、上記の方法で正しく折り返されない場合があります。そのような場合は、ボタンの背景色やパディングなどを調整するなど、デザインを微調整する必要があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Button with Wrapped Text</title>
  <style>
    /* CSS styles for the button */
    button {
      width: 100px; /* Fixed width of the button */
      padding: 10px; /* Padding around the text */
      border: 1px solid #ccc;
      cursor: pointer;
    }

    /* Option 1: Using overflow-wrap: break-word */
    button.option1 {
      overflow-wrap: break-word;
    }

    /* Option 2: Using white-space and word-break properties */
    button.option2 {
      white-space: nowrap;
      word-break: break-all;
    }
  </style>
</head>
<body>
  <button class="option1">This is a button with a long text that will be wrapped to fit the fixed width.</button>

  <button class="option2">This is another button with a long text that will be wrapped using white-space and word-break properties.</button>
</body>
</html>

Explanation

In the HTML code, two buttons are created with the classes option1 and option2.
The CSS styles define the basic appearance of the buttons, including their width, padding, border, and cursor.
For Option 1, the overflow-wrap: break-word; property is applied. This instructs the browser to break words at the boundary of the button container, allowing the text to wrap to multiple lines if necessary.
For Option 2, the white-space: nowrap; property is used to prevent the text from wrapping automatically. Additionally, word-break: break-all; is set to force the browser to break words at any point if they exceed the button width.

Key Points

The overflow-wrap property is a more modern approach and provides better browser support for text wrapping.
The white-space and word-break properties offer more granular control over text wrapping behavior but may not be as widely supported.
The chosen method may depend on the specific requirements and browser compatibility needs of your project.

Flexbox (Flexible Box Layout) is a CSS layout module that provides a more flexible and responsive way to layout elements. You can use flexbox to create a single-line container for the button text and enable text wrapping within that container.

button {
  width: 100px; /* Fixed width of the button */
  display: flex; /* Enable flexbox layout */
  align-items: center; /* Align text vertically in the center */
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}

button span {
  flex: 1; /* Allow the text to grow and wrap */
  white-space: nowrap; /* Prevent automatic text wrapping */
  overflow-wrap: break-word; /* Enable word wrapping when necessary */
}

The button element is set to use flexbox layout (display: flex).
The align-items: center property aligns the text vertically in the center of the button.
The span element is used to wrap the button text.
The flex: 1 property allows the span element to grow and occupy the available space within the button.
The white-space: nowrap property prevents the text from wrapping automatically within the span element.
The overflow-wrap: break-word property enables word wrapping when the text exceeds the available width of the span element.

Using max-width and text-overflow

This method utilizes the max-width property to limit the width of the text and the text-overflow property to control how excess text is handled.

button {
  width: 100px; /* Fixed width of the button */
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}

button span {
  display: block; /* Treat the text as a block element */
  max-width: 100%; /* Limit the width of the text to the button width */
  overflow: hidden; /* Hide excess text */
  text-overflow: ellipsis; /* Display an ellipsis (...) at the end of truncated text */
}

The span element is set to display as a block element (display: block).
The max-width: 100%; property limits the width of the text to the width of the button.
The overflow: hidden; property hides any text that exceeds the specified width.
The text-overflow: ellipsis; property displays an ellipsis (...) at the end of the truncated text, indicating that there is more text available.

Using text-align: justify

This method employs text-align: justify to distribute the text evenly within the button width, causing it to wrap if necessary.

button {
  width: 100px; /* Fixed width of the button */
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
  text-align: justify; /* Justify the text within the button */
}

The text-align: justify; property is applied to the button, instructing it to distribute the text evenly across its width.
This will cause the text to wrap onto multiple lines if it exceeds the button width while maintaining an even distribution of spacing.

Considerations

The flex layout method offers more flexibility and control over the layout of the button text.
The max-width and text-overflow approach provides a simple way to truncate text and display an ellipsis.
The text-align: justify method is suitable for short paragraphs of text but may not be ideal for longer content.

Choosing the Right Method

The most suitable method depends on your specific requirements and preferences. Consider factors like the desired text behavior, browser compatibility, and the overall layout of your web page.

html css button