参考资料

1. html链接标签详细说明以及案例
2. HTML 书签属性格式化
3. 如何检测开发者工具是否被禁用？
4. HTML 文本对齐方式
5. Html网页 Web 安全色
6. HTML 用于著作标题的
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;
}