在本教程中，你将学习如何用css使预编码块100%响应。
本教程解决了以下问题
- pre标签在移动端没有响应性
- pre标签应该是可水平滚动的
- Boostrap的pre代码块可以水平滚动 Pre是一个html标签，用于显示代码片段或存储格式化的文本，如行。
pre标签是一个完整的形式，或缩写为预格式化的html内容。
html中的pre标签示例
pre标签在html和浏览器中显示相同格式的文本。文本行使用浏览器的可用宽度。
- 它保留了格式化文本的换行符和空白处。
- 用于在编程博客中显示代码块
- 有利于网站所有者调试代码
This is html content displayed on browser using pre tag in html
displayed in second line using pretag
d.
如果没有足够的宽度，它就会溢出。
默认情况下，它显示以下应用的样式
pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0px;
}
如何使Pre标签100%响应？
100%响应意味着格式化的文本内容应该在手机和桌面上工作。显示长行代码块时，应使用水平滚动条，而不能出现布局中断。
pre标签占用了全部空间，当你在手机等小屏幕上查看时，这将是一个问题。
当你在手机上查看时，pre标签不应该失败，或者断行应该仍然像预期那样工作。
根据你想在手机上查看pre标签的方式，我们有多种方法可以实现
使用白色空间
pre {
white-space: pre-wrap;
}
使用这个方法，换行仍然有效，单词不会断裂，如果没有可用的空格，就会分成多行。
pre标签通过保留格式化的文本来包装文本。
因此，如果你有很长的文本行，在浏览器中显示同样的内容时就会溢出，它就会默认添加滚动，以使其具有响应性。
如果你想禁用水平滚动条，请使用overflow-x ，数值为hidden 。
pre{
overflow-x: hidden ;
}
如果你禁用水平滚动条，用户体验就会很差，所以你必须用pre标签包住一个文本。
下面是一个代码how do wrap a text in pre tag in html
pre{
white-space: pre-wrap;
max-width:100%;
height:auto;
}
默认情况下，使用bootstrap css的pre标签会在垂直滚动条中显示pre文本，并在pre中显示白色空格。
默认情况下，它会产生以下结果CSS
pre {
font-family: monospace;
white-space: pre;
}
要生成水平滚动条
pre {
pre {
overflow: auto;
word-wrap: normal;
white-space: pre;
}
最新版本的bootstrap可以将样式应用于pre和code标签。
总结
你学会了html例子中的pre标签，并使用普通的css和bootstrap使其100%响应。
