HTML代码中不换行，软换行，硬换行之间的区别是什么啊？
<textarea wrap=soft>软换行</textarea>
<textarea wrap=hard>硬换行</textarea>
我才试了一下，没发现有什么区别啊~ 展开
2020-09-30 · 百度认证:北京中公教育科技官方账号
中公教育IT培训优就业
我们在制作页面的时候经常使用br标签进行换行，那么什么是软换行呢？HTML5中出现了一个新的元素是wbr。
wbr是什么？
wbr是Word Break Opportunity 的缩写，Word Break Opportunity的意思是：单词换行时机。有人把它翻译成：软换行。那么我们就来看下wbr这个标签的用法吧~
wbr标签规定在文本中的何处适合添加换行符。如果单词太长，或者我们担心浏览器会在错误的位置换行，那么我们可以使用 元素。
浏览器支持情况：
所有浏览器都支持 标签，除了 Internet Explorer。
wbr的分析
在网页中，我们如果要处理URL地址，一般都使用连续的英文单词，默认情况下是不换行的，比如：
代码如下：
<style>
p{
width:200px;
background: orange;
}
</style>
<p>http://www.ujiuye.com/zt/webqzgcs/ujiuye.com/zt/webqzgcs/ujiuye.com/zt/webqzgcs/</p>
<style>
p{
width:200px;
background: orange;
}
</style>
<p>http:<wbr>//www<wbr>.ujiuye<wbr>.com<wbr>/zt<wbr>/webqzgcs<wbr>/ujiuye<wbr>.com<wbr>/zt<wbr>/webqzgcs<wbr>/ujiuye<wbr>.com<wbr>/zt<wbr>/webqzgcs/</p>
<style>
p{
width:120px;
background: orange;
}
</style>
<p>http:<wbr>//www<wbr>.ujiuye<wbr>.com<wbr>/zt<wbr>/webqzgcs<wbr>/ujiuye<wbr>.com<wbr>/zt<wbr>/webqzgcs<wbr>/ujiuye<wbr>.com<wbr>/zt<wbr>/webqzgcs/</p>
<style>
p{
width:200px;
background: orange;
}
</style>
<p>http:<br>//www<wbr>.ujiuye<br>.com<br>/zt<br>/webqzgcs<br>/ujiuye<br>.com<br>/zt<br>/webqzgcs<br>/ujiuye<br>.com<br>/zt<br>/webqzgcs/</p>
效果如下：
请点击输入图片描述
看起来很不美观。
如果我们使用word-break:break-all进行换行，效果如下：
请点击输入图片描述
单词虽然换行了，但它把单词直接打破了，很相应阅读。
我们再来改变下p标签的宽度看看效果：
请点击输入图片描述
可读性真的很差。
有没有什么办法技能换行，又不影响阅读呢?那就是使用wbr标签进行软换行。
我们推荐推荐在标点之前为 URL 换行，以便避免将标点符号留在行尾，这会让读者将 URL 的末尾搞错。
代码如下：
效果如下：
请点击输入图片描述
现在我们改变盒子的宽度，代码如下：
效果如下：
请点击输入图片描述
我们在所有的标签前面都加上了标签，如果宽度不够，那么我就在这里换行，如果宽度足够，那我就不换行，还在一行显示，这就是标签智能的地方，是不是很神奇~
br标签和wbr标签的区别：
表示必须换行。而意思是在浏览器窗口或父级窗口宽度足够的情况下，不换行;在宽度不足的情况下，在加了处主动换行。
如果还是上面的例子，我们使用br标签换行会是什么样呢?
代码如下：
效果如下：
请点击输入图片描述
我们可以看到，在每个br标签的位置都换行了，右侧留出大量空白位置，不智能，也很不美观。
wbr的应用场景
标签实际应用场景比较多的，比如我们例子中提到的URL的处理，网站中难免有URL的出现，这时候我们就可以使用标签进行智能的软换行。还有就是在一些技术文档中，有的变量名，对象名，属性名都很长，我们就也可以使用标签进行智能的软换行。
如果我们只做的网站是移动端的，屏幕宽度小，使用标签进行智能的软换行就更方便啦。或者是响应式的页面，也可以用到标签。
