背景
換行是很常見的需求，一般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就對了！