HTMLで文章を1行にする方法
Webページを作成する際、文章を1行に収めたい場合があります。例えば、ナビゲーションメニューの項目や、カード型のレイアウト要素内のタイトルなどが挙げられます。HTMLで文章を1行に収めるには、CSSの`white-space`プロパティと`overflow`プロパティを使用します。
white-spaceプロパティ
`white-space`プロパティは、要素内の空白文字の扱いを指定する際に使用します。文章を1行に収めるには、`white-space`プロパティの値に`nowrap`を指定します。
<p style="white-space: nowrap;">
この文章は1行に収まります。スペースや改行があっても無視されます。
</p>
上記コード例のように`white-space: nowrap;`を指定すると、文章内のスペースや改行は無視され、文章全体が1行に表示されます。
overflowプロパティ
`white-space: nowrap;`を指定すると、文章の長さがタグの横幅を超えた場合でも、文章は折り返されずに1行に表示されます。そのため、タグの横幅からはみ出した部分が、他の要素と重なってしまう可能性があります。これを防ぐためには、`overflow`プロパティを使用します。
`overflow`プロパティは、要素の内容が要素のボックスからはみ出した場合の表示方法を指定する際に使用します。文章の長さがタグの横幅を超えた分を非表示にするには、`overflow`プロパティの値に`hidden`を指定します。
<p style="white-space: nowrap; overflow: hidden;">
この文章は1行に収まりますが、タグの横幅を超えた分は非表示になります。
</p>
上記コード例のように`overflow: hidden;`を指定すると、タグの横幅からはみ出した部分は非表示になります。
プロパティの組み合わせ例
`white-space`プロパティと`overflow`プロパティを組み合わせることで、様々な表示パターンを実現できます。下記の表に、代表的な組み合わせ例と表示結果を示します。
| white-space | overflow | 表示結果 |
|---|---|---|
| nowrap | hidden | 文章を1行に収め、タグの横幅を超えた分は非表示にする。 |
| nowrap | scroll | 文章を1行に収め、タグの横幅を超えた分はスクロールバーを表示する。 |
| nowrap | visible | 文章を1行に収め、タグの横幅を超えた分はそのまま表示する。（デフォルト） |
参考資料
よくある質問
Q1: `white-space: nowrap;`を指定しても、文章が1行に収まりません。
A1: `white-space: nowrap;`は、要素内の空白文字の扱いを指定するプロパティであり、要素自体の幅を制御するものではありません。要素の幅が文章の幅よりも狭く設定されている場合は、`white-space: nowrap;`を指定しても文章は折り返されます。要素の幅を適切に設定するか、`overflow`プロパティと組み合わせて使用してください。
Q2: タグの横幅を超えた部分を「...」で省略表示するにはどうすればよいですか？
A2: `text-overflow`プロパティを使用します。`text-overflow: ellipsis;`を指定することで、タグの横幅を超えた部分を「...」で省略表示できます。ただし、`text-overflow`プロパティは、`white-space: nowrap;`と`overflow: hidden;`が指定されている場合にのみ有効となります。
Q3: 特定の文字列で改行したい場合はどうすればよいですか？
A3: 改行したい場所に`
`タグを挿入するか、`word-break: break-all;`を指定することで、特定の文字列で改行することができます。
その他の参考記事:css 吹き出し ジェネレーター