美文网首页mac学习html心得
控制空格换行和保留空格显示的pre

控制空格换行和保留空格显示的pre

作者: 九天懒猫 | 来源:发表于2022-11-04 23:12 被阅读0次

1-<pre>标签意为 preserve,保留内部文本的换行和空格;

2-pre标签内,文字不论怎么连续使用空格是如何显示?

3-用 pre 作为文本换行工具的如何使用?

4-pre换行的缺陷有几种情况?

下面测试开始

1-正常的h1,p,div,pre内的文字如果有空格如何显示?请看下图

其实,诶个标签貌似可以显示空格。

但是多行后如何显示?请看下图

多行后,只有pre标签的显示了分行,其他的在一行里。

2-pre标签内空格数量不同时候如何显示,请看下图

但行显示没有问题,多行如何?请看下图

多行的时候发现对于文字前的空行会显示,而且,原以为自动换行的文字前空位,其实也是作为空格显示的,这就,嗯有点点意思了,代码前的标签前面的空格是为了美观?这是代码的美学?值得咨询下,这个后面再说

3-试了下用pre包裹别的标签,看看显示如何,请看下图

出乎意料,每个段之间的行间距巨大,原因不懂,我问问朋友在后面总结吧

反向包裹以下会如何?做个对比,

对比发现行间距不一样,看来有学问在里面,无用的问题又增加了。

4-关于pre的缺陷

咨询得来的答案。

(仅为个人自学的一点点思考,如有错漏,欢迎留言指正)

这篇文章的代在这里:

https://app.yinxiang.com/fx/0591112a-d635-4220-8d92-1ac7bf6a8aad

相关文章

  • 控制空格换行和保留空格显示的pre

    1- 标签意为 preserve,保留内部文本的换行和空格; 2-pre标签内,文字不论怎么连续使用空格是如何显示...

  • 关于white-space的记录

    给出代码 1.nowrap 结论: 自动合并空格、tab、换行符为一个空格,禁止换行 2.pre 结论: 保留空...

  • 格式处理

    white-space:normal|nowrap(不自动换行)|pre(换行、空格、tab保留住,不允许自动换行...

  • HTML的pre和code

    pre   - 定义:用来定义预格式化的文本,包含在pre的文本会保留空格和换行符,文本呈现为等宽字体 pre包含...

  • HTML中
    标签的用法

    < pre> < pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本...

  • 2019-08-12 vue使用v-html数据太长不换行问题

    首先,使用pre标签pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符(例如:...

  • vue使用v-html数据太长不换行问题

    首先,使用pre标签pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符(例如:...

  • white-space中 pre pre-line pre-wr

    pre:会保留空格,但我想它与pre-line/pre-wrap最大的不同点就是不会自动换行,单行走到底,直到遇到...

  • 微信小程序 文字换行

    view标签文字换行,需要设置属性white-space: pre-wrap;来让文本保留空格和回车,例如上例:

  • html中pre和code标签

    pre标签 1.pre标签的定义: 标签用来定义预格式化的文本,被包围在pre标签中的文本通常会保留空格和换行符,...

网友评论

    本文标题:控制空格换行和保留空格显示的pre

    本文链接:https://www.haomeiwen.com/subject/utoutdtx.html