HTML代码中不换行，软换行，硬换行之间的区别是什么啊？

我们在制作页面的时候经常使用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>

效果如下：

请点击输入图片描述

看起来很不美观。

如果我们使用word-break:break-all进行换行，效果如下：

请点击输入图片描述

单词虽然换行了，但它把单词直接打破了，很相应阅读。

我们再来改变下p标签的宽度看看效果：

请点击输入图片描述

可读性真的很差。

有没有什么办法技能换行，又不影响阅读呢?那就是使用wbr标签进行软换行。

我们推荐推荐在标点之前为 URL 换行，以便避免将标点符号留在行尾，这会让读者将 URL 的末尾搞错。

代码如下：

<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>

效果如下：

请点击输入图片描述

我们在所有的标签前面都加上了标签，如果宽度不够，那么我就在这里换行，如果宽度足够，那我就不换行，还在一行显示，这就是标签智能的地方，是不是很神奇~

br标签和wbr标签的区别：

表示必须换行。而意思是在浏览器窗口或父级窗口宽度足够的情况下，不换行在宽度不足的情况下，在加了处主动换行。

如果还是上面的例子，我们使用br标签换行会是什么样呢?

代码如下：

<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>

效果如下：

请点击输入图片描述

我们可以看到，在每个br标签的位置都换行了，右侧留出大量空白位置，不智能，也很不美观。

wbr的应用场景

标签实际应用场景比较多的，比如我们例子中提到的URL的处理，网站中难免有URL的出现，这时候我们就可以使用标签进行智能的软换行。还有就是在一些技术文档中，有的变量名，对象名，属性名都很长，我们就也可以使用标签进行智能的软换行。

如果我们只做的网站是移动端的，屏幕宽度小，使用标签进行智能的软换行就更方便啦。或者是响应式的页面，也可以用到标签。

多行的就不能使用Input了。需要使用textarea标签属性：

textarea代表html的单多行输入域

html多行输入框

tyle="OVERFLOW:   hidden">

style="OVERFLOW:   visible">始终不显示滚动条，文本区域的大小会根据内容的增加，自动增长，以显示全部内容

<textarea   cols="2"   rows="6"   style="OVERFLOW:   hidden"></textarea>

例子

<tr>

<td></td>

<td><textarea name="reworkmes"   cols="40"   rows="4"   style="OVERFLOW:   hidden"></textarea></td>

</tr>

扩展资料

textarea标签是成对出现的,以<textarea>开始,以</textarea>结束

专有属性.

1、common -- 公共属性

2、accesskey -- 表单的快捷键访问方式

3、cols -- 多行输入域的列数

4、disabled -- 输入域无法获得焦点、无法选择，以灰色显示，在表单中不起任何作用

5、name -- 元素名称

6、readonly -- 输入域可以选择，但是无法修改

7、rows -- 多行输入域的行数

8、tabindex -- 输入域的"tab"键遍历顺序

参考资料

百度百科-HTML

---