您当前的位置: 站长圈 > 网页前端

css强制换行和强制不换行

来源:站长圈|0 作者:adminzzq 点击: 0

制作网页中我们有时会遇到这样的的问题:在我们需要它换行的地方它不换行,不需要它换行它却自动换行了。那么我们怎么才能控制它,让它在我们控制下选择要不要换行呢?

先来看这样一个问题,有一个类名为.box的盒子,里面有一串数字或者英文字母:

<div class="box">1111111111111111111111111111111111111111111111111111111111</div>

先设置一下宽度高度和背景色,方便大家看清楚

.box{ width:300px; height:150px; margin:0 auto; background-color:#cdd;}

这时我们看见,虽然控制了盒子的宽度,但是里面的数字还是超出了盒子的范围,而且没有换行,如图:

\

下面我们就要用到一个css里比较冷门的属性来让它强制换行,修改css代码为:

.box{ width:300px; height:300px; margin:0 auto; background-color:#cdd; word-wrap: break-word; word-break: normal;}
word-wrap: break-word; /*内容将在边界内换行。如果需要,词内换行( word-break )也将发生 */
word-break: normal;/*允许在词间换行*/

看看效果吧

\

下面我们再来看强制换行的例子。先看这样一段代码:

<div class="box">
<a href="">uc网页帝国</a>
<a href="">站长圈</a>
<a href="">www.6nav.com</a>
<a href="">路航网络培训</a>
</div>

先设置一下它的宽高及背景,看看它的样子。

.box{ width:300px; height:150px; margin:0 auto; background-color:#cdd;}

看见它里面的“路航网络培训”6个字本来是一个词语,却在边界的地方从中间强制换行了,如图:

\

要想让它不要在单词中间换行,可以添加如下代码:

.box a{ word-break:keep-all;white-space:nowrap;}
word-break:keep-all;/*与所有非亚洲语言的 normal 相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本*/
white-space:nowrap;/*文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。*/

看看效果吧

\