一、背景
最近在做react项目,ui用的antd,看了上图的需求后,这不就是list组件么,用上就是了。额?显示不出原有的换行符。。。 查了list的源码,是给什么显示什么,不会保留空格和换行符。于是,脑海里闪现pre标签。
二、pre标签的定义和用法
-
可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为 等宽字体(字符宽度相同的电脑字体)。
-
常见应用是用来表示计算机的源代码。
ps:如果您希望使用该标签来定义计算机源代码,比如 HTML 源代码,请使用符号实体来表示特殊字符,比如 "<" 代表 "<",">" 代表 ">","&" 代表 "&"。
三、pre标签上手
代码如下:
显示如下: 右边超出了div的宽度居然不换行了。怎么才能换行呢? 查了下浏览器pre默认属性:white-space????是处理元素内空白的属性,瞧瞧去:
有个pre-wrap,保留空白符序列,但是正常地进行换行,就它了。 终于好看了!四、不得不说的code
提到pre,肯定离不开code。那么code 标签是干嘛的呢?
需要显示多行的话需配合pre使用。五、code和pre区别
- code标签用于表示计算机源代码或者其他机器可以阅读的文本内容,暗示浏览器可以做出自己的样式处理,pre标签则没有这项功能。
- code只能显示一行代码
- code标签和pre标签是可以嵌套使用的,但是必须注意两者的嵌套顺序。