html不换行代码？

HTML结构：

<p class="one">1.只对英文起作用，以字母作为换行依据</p>

<p class="two">2.只对英文起作用，以单词作为换行依据</p>

<p class="three">3.只对中文起作用，强制换行</p>

<p class="four">4.强制不换行，都起作用</p>

<p class="five">5.不换行，超出部分隐藏且以省略号形式出现</p>

<p class="five">6.不换行，超出部分隐藏且以省略号形式出现</p>

CSS代码：

.one{ word-break:break-allwidth:150px}/*只对英文起作用，以字母作为换行依据*/

.two{ word-wrap:break-wordwidth:150px}/*--只对英文起作用，以单词作为换行依据*/

.three{white-space:pre-wrapwidth:150px}/*只对中文起作用，强制换行*/

.four{white-space:nowrapwidth:10px}/*强制不换行，都起作用*/

.five{white-space:nowrapoverflow:hiddentext-overflow:ellipsiswidth:100px}／/*不换行，超出部分隐藏且以省略号形式出现*/

1. word-break:break-all只对英文起作用，以字母作为换行依据

2. word-wrap:break-word只对英文起作用，以单词作为换行依据

3.{white-space:pre-wrap只对中文起作用，强制换行

4.{white-space:nowrap强制不换行，都起作用

5.{white-space:nowrapoverflow:hiddentext-overflow:ellipsis不换行，超出部分隐藏且以省略号形式出现

注意，一定要指定容器的宽度，不然的话是没有用的。

注意word-break 是IE5+专有属性

语法：

word-break : normal | break-all | keep-all

参数：

normal : 　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行

break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明：

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。

对于中文，应该使用break-all 。

我们在制作页面的时候经常使用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的出现，这时候我们就可以使用标签进行智能的软换行。还有就是在一些技术文档中，有的变量名，对象名，属性名都很长，我们就也可以使用标签进行智能的软换行。

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

---