参考资料

1. HTML 内联元素
2. HTML 使用<div> 元素布局
3. html内嵌框架标签详细说明以及案例
4. HTML 表格的嵌套
5. HTML 布局
6. HTML/MarkDown互转有哪些
7. HTML 框架
8. HTML 段落格式化标签

HTML 折行

详细介绍

HTML 折行是指在 HTML 文档中强制文本换行的功能，用于控制文本的显示布局。

主要标签

<br> 标签

• 自闭合标签，不需要闭合标签

• 在当前位置插入一个换行符

• 语法：<br> 或 <br />

<wbr> 标签

• 表示"单词中断机会"（Word Break Opportunity）

• 指示浏览器可以在必要时在此处断行

• 语法：<wbr>

用法示例

基本折行

这是一行文字<br>这是新的一行文字

地址格式

地址：<br>
123 街道<br>
城市，邮编

诗歌格式

床前明月光，<br>
疑是地上霜。<br>
举头望明月，<br>
低头思故乡。

单词中断

这是一个非常长的单词super<wbr>cali<wbr>fragilistic<wbr>expiali<wbr>docious

CSS 扩展

使用 CSS 控制折行

1. white-space 属性

/* 保留空白和换行 */
pre {
  white-space: pre;
}

/* 合并空白，保留换行 */
p {
  white-space: pre-line;
}

/* 合并空白，不换行 */
.nowrap {
  white-space: nowrap;
}

2. word-break 属性

/* 允许在单词内断行 */
.break-all {
  word-break: break-all;
}

/* 只在允许的断点断行 */
.break-word {
  word-wrap: break-word;
}

3. overflow-wrap 属性

/* 允许长单词换行 */
.wrap {
  overflow-wrap: break-word;
}

4. hyphens 属性

/* 允许连字符断词 */
.hyphenate {
  hyphens: auto;
}

5. 使用 ::after 伪元素

.line-break::after {
  content: "\A";
  white-space: pre;
}

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。