- ブロック要素の使用:
改行したいテキストを囲む要素をブロック要素に設定します。例えば、
div要素を使用します。
<div>
This is a long text that needs to be broken into multiple lines.
</div>CSSでdiv要素にdisplay: block;を指定することで、テキストは自動的に改行されます。
word-wrapプロパティの使用: 改行したいテキストが1つの単語で構成されている場合、word-wrap: break-word;を使用することで、単語を分割して改行します。
p {
word-wrap: break-word;
}<p>Thisisalongtextthatneedstobebrokenintomultiplelines.</p>white-spaceプロパティの使用: テキスト内の空白の扱い方を制御するために、white-spaceプロパティを使用できます。
p {
white-space: pre-line;
}<p>This is a long text that needs to be broken into multiple lines.</p>上記のコードでは、pre-line値を使用しているため、改行が含まれるテキストは自動的に改行されます。
これらの方法を組み合わせて使用することもできます。例えば、div要素をブロック要素に設定し、その内部のテキストにword-wrap: break-word;を適用することで、特定のテキストに対して改行を行うことができます。