pre标签 与 code标签
创始人
2025-09-20
0次
一、两个标签区别
字符如下：
const str =
"[{'return_data': 'response', 'return_data_type': 'com.xiaoju.uemc.modules.support.common.Response'}]";AI运行代码js12（1）含义
pre：可以保留您需要的文本格式，比如不会取消换行和空格，并且所示文本是等宽的
code：将文本变成等宽字体以及提示这段文本是源程序代码
（2）显示区别，上面是pre，下面是code
无限制时，可以看到是没有任何区别的
设置div（宽200px，高200px）包裹时，可以看到pre出现了滚动条，而code出现了换行
给div加上
overflow-Y: scroll时，code标签也出现了横向滚动条当字符自带换行时
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 进行样式控制
normal，和上面一样
nowrap，pre保留空格和换行，不保留文字换行（有滚动条）；code样式清空
pre，code和pre样式一样，保留空格、行尾空格换行，不保留文字换行
pre-wrap，code和pre样式一样，保留空格、行尾空格换行，保留文字换行
pre-lin,，保留换行符，合并空格和制表符，文字换行，行尾空格删除
break-spaces，保留换行符，保留空格和制表符，文字换行，行尾空格保留
总结：
| 换行符 | 空格和制表符 | 文字换行 | 行尾空格 | |
|---|---|---|---|---|
| normal | 合并 | 合并 | 换行 | 删除 |
| nowrap | 合并 | 合并 | 不换行 | 删除 |
| pre | 保留 | 保留 | 不换行 | 保留 |
| pre-wrap | 保留 | 保留 | 换行 | 挂起 |
| pre-line | 保留 | 合并 | 换行 | 删除 |
| break-space | 保留 | 保留 | 换行 | 换行 |
【版权声明】
本站部分内容来源于互联网，本站不拥有所有权，不承担相关法律责任。如果发现本站有侵权的内容，欢迎发送邮件至masing@13sy.com 举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
下一篇：没有了
相关内容
热门资讯
Invalid left-ha...
写一个提交函数的时候，发现函数不生效，F12之后看到Invalid left-hand side i...
响应图片(Responsive...
一、开门见山 响应图片技术可以说是响应布局衍生出来的一个小分支。说白了，就是不同显示器宽度下调用不同...
轻松删除MetInfo CMS...
第一步：首页底部版权，模板文件foot直接删除； 第二部：首页头部generator版权，\publ...
ckplayer6.3如何替换...
1.刚打开播放器，视频在缓冲时播放器中间的LOGO怎么替换？(如下图) 2.视频播放器右上角的CK ...
inDensity，inTar...
如果接触Android中的Bitmap较深的话，肯定会知道标题上的这三个属性值，那么这三个属性值的关...
JS 验证
利用Javascript中每个对象(Object)的prototype属性我们可以为Javascri...
在文本框中输入时保证总是在最...
那就要在keypress时保证文本框的光标在尾部，而文本框value赋值后其光标默认在最后，故可采用...
微信UA
Mozilla/5.0 (Linux; U; Android 2.3.6; zh-cn; GT-S5...
检测大写锁定键(Caps Lo...
h1检测大写锁定键/h1form action="#" method="post" p label ...
iframe高度自适应,全屏,...
!注意此方法用于同一个域名下,可能需要部署在服务器上才能看出效果 !DOCTYPE html PUB...