设为首页 - 加入收藏 - 网站地图 - RSS订阅 村姑网-www.cunguer.com
当前位置:首页 > 网页制作 > CSS > 正文

css 一行显示之:用white-space 属性控制文字在一行显示

时间:2015-02-25 22:27:20 来源:村姑网 作者:喜欢安静 阅读: 137 次
导读:今天我们要说的是:利用 css 的 white-space 属性 来控制所有的 文字在同一行显示 ,做到不管文字有多长都不会换行。主要通过给white-space 属的值为nowrap来实现,当值为nowrap时,文字不会换行,直到遇到换行符br。 我们编写如下html代码: div id=huanhan...

    今天我们要说的是:利用csswhite-space 属性来控制所有的文字在同一行显示,做到不管文字有多长都不会换行。主要通过给white-space 属的值为“nowrap”来实现,当值为“nowrap”时,文字不会换行,直到遇到换行符“<br>”。

    我们编写如下html代码:

    <div id="huanhang">我的white-space 属性没设置,所以我会换行显示。</div>

    然后在css文件中设置css属性为下面的值:

    #huanhang
    {
      width:100px;
      background-color:#FF0000
    }

    此时我们没有设置white-space 属性,而有对该div设置了宽度限制,为了更方便查看,所以设置背景色为红色,在浏览器中预览效果如下图所示:

没设置white-space属性时,文字不换行,预览图

    此时我们发现,文字没有在同一行显示,而是到达最大宽度后另起一行。下面我们修改html代码,实际上只需要给“huanhang”这个div的css中加上white-space 属性并将其值设置为“nowrap”即可,这里我们为了使读者不迷糊,所以把html代码改为如下:

<div id="buhuanhang">我的white-space 属性为“nowrap”,所以我不会换行显示。</div>

将css代码改为:

 

#buhuanhang
{
width:100px;
white-space:nowrap;
background-color:#FF0000;
}

    此时我们在浏览器中查看一下,如下图:

在css中加上了white-space属性并将其值设为nowrap,文字将不换行的效果图

    此时,我们发现,文字已经超出了“buhuanhang”这个div的宽度,但是却没有换行,在一行显示了。实际上用css控制文字在一行显示就这么简单。

《css 一行显示之:用white-space 属性控制文字在一行显示》地址:www.cunguer.com/article/95.html,本文来自村姑网,您身边的IT专家 www.cunguer.com,转载请注明出处,您的支持是我们创作的源泉~!