html之code标签和pre标签

一、两个标签区别

字符如下：

 const str =
    "[{'return_data': 'response', 'return_data_type': 'com.xiaoju.uemc.modules.support.common.Response'}]";

（1）含义

均来自w3c

• pre：可以保留您需要的文本格式，比如不会取消换行和空格，并且所示文本是等宽的
• code：将文本变成等宽字体以及提示这段文本是源程序代码

（2）显示区别，上面是pre，下面是code

1. 无限制时，可以看到是没有任何区别的
   
2. 设置div（宽200px，高200px）包裹时，可以看到pre出现了滚动条，而code出现了换行
   
3. 给div加上 overflow-Y: scroll时，code标签也出现了横向滚动条
   
4. 当字符自带换行时

  const str = `[{
  'return_data': 
  'response',
   'return_data_type':
   'com.xiaoju.uemc.modules.support.common.Response'}]`;

可以看到两个都有换行，但pre保留了空格，
且两个滚动条的高度不同，pre以代码为高度，code以div为高度（截图显示不了，请自行体会）

5. 转义字符

  const str = `[{
  'return_data': \n'response',
   'return_data_type':\n'com.xiaoju.uemc.modules.support.common.Response'}]`;

二、使用white-space 进行样式控制

1. normal，和上面一样

2. nowrap，pre保留空格和换行，不保留文字换行（有滚动条）；code样式清空
   

3. pre，code和pre样式一样，保留空格、行尾空格换行，不保留文字换行
   

4. pre-wrap，code和pre样式一样，保留空格、行尾空格换行，保留文字换行
   

5. pre-lin,，保留换行符，合并空格和制表符，文字换行，行尾空格删除
   

6. break-spaces，保留换行符，保留空格和制表符，文字换行，行尾空格保留
   

总结：

	换行符	空格和制表符	文字换行	行尾空格
normal	合并	合并	换行	删除
nowrap	合并	合并	不换行	删除
pre	保留	保留	不换行	保留
pre-wrap	保留	保留	换行	挂起
pre-line	保留	合并	换行	删除
break-space	保留	保留	换行	换行

参考文章：https://zhuanlan.zhihu.com/p/395448817