关于pre换行的一点探究

最新推荐文章于 2022-08-01 16:42:56 发布

GAMELOFT9

最新推荐文章于 2022-08-01 16:42:56 发布

阅读量336

点赞数

分类专栏： HTML5 文章标签： pre css 自动换行 white-space

本文链接：https://blog.csdn.net/gameloft9/article/details/103385366

版权

HTML5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

背景

换行是很常见的需求，一般word-break搭配overflow属性就可以很轻松的实现，例如:

<html lang="zh"><head>
	<style type="text/css">
		.log_wrap{
		  overflow-x:hidden;
		  overflow-y:auto;
		  word-break:break-all;
		}	
	</style>
	<body >
		<div class="log_wrap" style="width:500px;height:300px;">
11:12:03.657 INFO  [main] m.i.j.a.JobsAgentApplicationRunner - Starting JobsAgentApplicationRunner v1.0-SNAPSHOT on linux-mnj0 with PID 25400 (/home/dev_nuis/jobs/application/sofa-jobs-agent-bootstrap.jar started by dev_nuis in /home/dev_nuis/jobs/bin)
11:12:03.657 INFO  [main] m.i.j.a.JobsAgentApplicationRunner - The following profiles are active: batch,dev
11:12:06.304 INFO  [main] o.s.c.s.PostProcessorRegistrationDelegate$BeanPostProcessorChecker - Bean 'com.alipay.sofa.runtime.spring.configuration.SofaRuntimeAutoConfiguration' of type [com.alipay.sofa.runtime.spring.configuration.SofaRuntimeAutoConfiguration$$EnhancerBySpringCGLIB$$13bb67c3] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying)
11:12:06.332 INFO  [main] o.s.c.s.PostProcessorRegistrationDelegate$BeanPostProcessorChecker - Bean 'jobsAgentApplicationRunner' of type [me.izhong.jobs.agent.JobsAgentApplicationRunner$$EnhancerBySpringCGLIB$$32a7bb45] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying)
11:12:06.340 INFO  [main] o.s.c.s.PostProcessorRegistrationDelegate$BeanPostProcessorChecker - Bean 'jobsConfigBean' of type [xx.xxx.jobs.agent.bean.JobsConfigBean$$EnhancerBySpringCGLIB$$aa6bee26] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying)
11:12:06.354 INFO  [main] m.i.j.a.util.ContextUtil - isProd初始化完成，isProd=false
		</div>
	</body>
</html>

效果如下所示：
在这里插入图片描述
不幸的是，在pre标签里面，这样的写法不起作用，如下所示：

<html lang="zh"><head>
	<style type="text/css">
		.div_wrap{
		  overflow-x:hidden;
		  overflow-y:auto;
		
		  word-break:keep-all;
		}	
pre {
overflow-x:hidden;
overflow-y:auto;
word-beak:break-all;
}
	</style>
	<body >
	    <p>这是div:</>
		<div class="div_wrap" style="width:500px;height:300px;">
11:12:03.657 INFO  [main] m.i.j.a.JobsAgentApplicationRunner - Starting JobsAgentApplicationRunner v1.0-SNAPSHOT on linux-mnj0 with PID 25400 (/home/dev_nuis/jobs/application/sofa-jobs-agent-bootstrap.jar started by dev_nuis in /home/dev_nuis/jobs/bin)
11:12:03.657 INFO  [main] m.i.j.a.JobsAgentApplicationRunner - The following profiles are active: batch,dev
11:12:06.304 INFO  [main] o.s.c.s.PostProcessorRegistrationDelegate$BeanPostProcessorChecker - Bean 'com.alipay.sofa.runtime.spring.configuration.SofaRuntimeAutoConfiguration' of type [com.alipay.sofa.runtime.spring.configuration.SofaRuntimeAutoConfiguration$$EnhancerBySpringCGLIB$$13bb67c3] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying)
11:12:06.332 INFO  [main] o.s.c.s.PostProcessorRegistrationDelegate$BeanPostProcessorChecker - Bean 'jobsAgentApplicationRunner' of type [me.izhong.jobs.agent.JobsAgentApplicationRunner$$EnhancerBySpringCGLIB$$32a7bb45] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying)
11:12:06.340 INFO  [main] o.s.c.s.PostProcessorRegistrationDelegate$BeanPostProcessorChecker - Bean 'jobsConfigBean' of type [me.izhong.jobs.agent.bean.JobsConfigBean$$EnhancerBySpringCGLIB$$aa6bee26] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying)
11:12:06.354 INFO  [main] m.i.j.a.util.ContextUtil - isProd初始化完成，isProd=false
		</div>

        <p>这是pre:</>
		<pre style="width:500px;height:300px;">
11:12:03.657 INFO  [main] m.i.j.a.JobsAgentApplicationRunner - Starting JobsAgentApplicationRunner v1.0-SNAPSHOT on linux-mnj0 with PID 25400 (/home/dev_nuis/jobs/application/sofa-jobs-agent-bootstrap.jar started by dev_nuis in /home/dev_nuis/jobs/bin)
11:12:03.657 INFO  [main] m.i.j.a.JobsAgentApplicationRunner - The following profiles are active: batch,dev
11:12:06.304 INFO  [main] o.s.c.s.PostProcessorRegistrationDelegate$BeanPostProcessorChecker - Bean 'com.alipay.sofa.runtime.spring.configuration.SofaRuntimeAutoConfiguration' of type [com.alipay.sofa.runtime.spring.configuration.SofaRuntimeAutoConfiguration$$EnhancerBySpringCGLIB$$13bb67c3] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying)
11:12:06.332 INFO  [main] o.s.c.s.PostProcessorRegistrationDelegate$BeanPostProcessorChecker - Bean 'jobsAgentApplicationRunner' of type [me.izhong.jobs.agent.JobsAgentApplicationRunner$$EnhancerBySpringCGLIB$$32a7bb45] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying)
11:12:06.340 INFO  [main] o.s.c.s.PostProcessorRegistrationDelegate$BeanPostProcessorChecker - Bean 'jobsConfigBean' of type [me.izhong.jobs.agent.bean.JobsConfigBean$$EnhancerBySpringCGLIB$$aa6bee26] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying)
11:12:06.354 INFO  [main] m.i.j.a.util.ContextUtil - isProd初始化完成，isProd=false
		</pre>
	</body>
</html>

效果图：
在这里插入图片描述
可以看到，pre里的内容被顶出去了，并没有换行。而且由于overflow-x:hidden;的效果，导致顶出去的内容被隐藏了。

解决方案

针对pre，我们还需要借助white-space:pre-wrap;的威力，如下所示：

pre {
 overflow-x:hidden;
 overflow-y:auto;
		
 word-break:break-all;
 white-space:pre-wrap;
}

效果如下：
在这里插入图片描述
可以看到，已经完全符合我们的期望。white-space的介绍如下：
white-space属性指定元素内的空白怎样处理。

使用了pre-wrap会保留我们的空白符，并且会正常的进行换行，这样就不会因为过长而撑爆容器。
在第一个例子中，虽然自动换行了，但是我们文本原来的的换行被忽略了，导致展示出来的内容密密麻麻，十分丑陋：
在这里插入图片描述
我们可以加上white-space属性，然后再看效果:

使用了white-space，我们原本的换行就保留下来了，是不是好看多了？

网上搜索的时候，有很多使用word-warp和word-break混搭的，其实没有必要，这里有一篇文章很好的区分了这两个之间的关系：你真的了解word-break和word-wrap的区别吗？
文章的核心内容就是：
word-wrap 是用来决定允不允许单词内断句的，如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句。
word-break:break-all则更变态，因为它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句。这也可以解释为什么说它的作用是决定用什么方式来断句的，那就是用了word-break:break-all，就等于使用粗暴方式来断句了。总之一句话，如果您想更节省空间，那就用word-break:break-all就对了！