HTML5でnowrap属性は使用できない？代替方法を紹介
nowrap属性は、テーブルのセル内にある文章の自動改行を禁止するためのものでした。
HTML5では、このnowrap属性が廃止されていることを知っていましたか？
それでは、文章を改行させたくない場合、どのように処理すればいいのでしょうか？
他に方法があるなら知りたいですよね。
今回は、nowrap属性を使わずに、文章の自動改行を禁止する方法を紹介します。ぜひ最後まで読んでくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
スタイルシートのwhite-spaceプロパティを使用する
nowrap属性の代わりに、CSSのwhite-spaceプロパティを使って指定することができます。
具体的には、以下のように記述します。
p { white-space:nowrap;}pの部分は、セレクタといい、HTML内のどの範囲にデザインを適用するのか指定します。
white-spaceの初期値は「normal」で、何も指定していない場合、この値が適用されます。
normalのときには、改行や連続したスペース、タブなどが、1つの半角スペースとしてまとめられ、要素の横幅に合わせて自動改行されます。
white-spaceの値を「nowrap」にすることで、自動改行がなくなり、収まらない文章は要素からはみ出します。
他にwhite-spaceには次のような値があります。
- pre 「改行や連続したスペース、タブなどをそのまま表示。自動改行なし」
- pre-wrap 「改行や連続したスペース、タブなどをそのまま表示。自動改行あり」
- pre-line 「連続したスペースやタブなどがまとめられる。改行は反映されるが自動改行はなし」
自動改行せず、要素からはみ出した文章の表示方法は、これとは別のoverflowプロパティで指定します。
例えば、overflow:hiddenと指定した場合、はみ出した部分は非表示になります。
まとめ：nowrap属性の代わりにwhite-spaceプロパティを使う
今回は、nowrap属性の代わりに使用できる、white-spaceプロパティのnowrapについて、説明しました。
HTMLは歴史の中で、特定の機能が廃止されたり、新しく生まれたりしています。
すべて把握することは難しいですが、新しい情報を取り入れていくことは大事ですよね。
今回の記事が少しでも参考になれば幸いです。
