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

2022-11-04 本文已影响0人九天懒猫

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

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

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

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

下面测试开始

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

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

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

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

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

但行显示没有问题，多行如何？请看下图

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

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

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

反向包裹以下会如何？做个对比，

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

4-关于pre的缺陷

咨询得来的答案。

（仅为个人自学的一点点思考，如有错漏，欢迎留言指正）

这篇文章的代在这里：