読者です 読者をやめる 読者になる 読者になる

脳汁portal

アメリカ在住(だった)新米エンジニアがその日学んだIT知識を書き綴るブログ

[html/css] html でtableのセル内とかで自動改行(折り返し)禁止にする方法(nowrap, whitespace)

html css

htmlで自動で改行して欲しくいときに、改行(折り返し)禁止にする方法です。

こんな感じ

こちらのセルは自動改行禁止にしています。 こちらのセルは自動改行禁止にしていません。

whitespace(CSSとして別で記述)

htmlファイル

<table border="1" width="500">
  <tr>
    <td class="test">こちらのセルは自動改行<span style="color: #ff0000"><b>禁止</b></span>にしています。</td>
    <td>こちらのセルは自動改行禁止にしていません。</td>
  </tr>
</table>

CSSファイル

.test {
  white-space: nowrap;
}

nowrap(タグ内に直接記述)

HTMLファイル

<table border="1" width="500">
  <tr>
    <td nowrap>こちらのセルは自動改行<span style="color: #ff0000"><b>禁止</b></span>にしています。</td>
    <td>こちらのセルは自動改行禁止にしていません。</td>
  </tr>
</table>
  • 3行目のnowrapをつけると改行禁止になります
  • ただしこのやり方は現在は非推奨となっているので、今後使えなくなる可能性があります。