CSS中几种常用的换行方法
<h3>1、使用 br 元素：</h3><p>最简单的换行方法是在需要换行的位置插入<br />元素。例如：</p>
<div class="jb51code"><pre class="brush:xhtml;"><p>This is a sentence.<br>It will be on a new line.</p></pre></div>
<p>这会在 “This is a sentence.” 和 “It will be on a new line.” 之间创建一个换行。</p>
<p>效果：</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/2023120715534454.png" /></p>
<h3>2、使用 white-space 属性：</h3>
<p>white-space 属性可以控制元素中文本的换行方式。常用的取值有：</p>
<ul><li>normal（默认值）：文本自动换行，默认情况下会根据容器的大小自动换行。</li><li>nowrap：文本不进行换行，超过容器宽度时会溢出。</li><li>pre：保留原始的空白符（空格和换行符），文本按照源码中的格式显示。</li><li>pre-wrap：保留原始的空白符，文本在遇到边界时会自动换行。</li><li>pre-line：合并连续的空白符，文本在遇到边界时会自动换行。</li></ul>
<p>例如，将一个 div元素的 white-space 属性设置为 pre-wrap 可以实现自动换行：</p>
<div class="jb51code"><pre class="brush:css;"><style>
.multiline {
white-space: pre-wrap;
}
</style>
<div class="multiline">
This is a long sentence that will be wrapped to the next line if necessary.
</div></pre></div>
<p>效果：</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/2023120715534455.png" /></p>
<h3>3、使用 word-break 属性：</h3>
<p>word-break 属性可以控制单词在换行时的断开方式。常用的取值有：</p>
<ul><li>normal（默认值）：不强制断行，尽可能保持单词完整性。</li><li>break-all：允许在单词内部断行，例如超出容器宽度时会将单词拆分为多行显示。</li><li>keep-all：尽量保持多字母语言的连续性，适用于东亚语言。</li></ul>
<p>例如，将一个 p元素的 word-break 属性设置为 break-all 可以实现单词内部的换行：</p>
<div class="jb51code"><pre class="brush:xhtml;"><style>
p {
word-break: break-all;
}
</style>
<p>Thisisalongwordthatwillbebrokenintomultiplelinesifnecessary.</p></pre></div>
<p>效果：</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/2023120715534456.png" /></p>
頁:
[1]