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

css 一行显示之:文字超出宽度自动隐藏,并加上省略号

时间:2015-02-25 22:29:54 来源:村姑网 作者:喜欢安静 阅读:
导读:为了页面的美观和整体的布局,我们经常需要控制 文本在一行显示 ,超出部分直接隐藏或者 隐藏 后在后面加上 省略号 。用css控制文本在一行显示我们使用white-space:nowrap,如果有不会的请查看《 css 一行显示之:用white-space 属性控制文字在一行显示 》这...

    为了页面的美观和整体的布局,我们经常需要控制文本在一行显示,超出部分直接隐藏或者隐藏后在后面加上省略号。用css控制文本在一行显示我们使用“white-space:nowrap”,如果有不会的请查看《css 一行显示之:用white-space 属性控制文字在一行显示》这一篇文章。本篇文章主要来说一下文本一行显示超出自动隐藏和隐藏后加省略号。

    css中用overflow:hidden实现一行显示超出自动隐藏:

    css的overflow属性取值为hidden时,表示超出时隐藏。overflow的意思是“溢出”,而“hidden”的意思是“隐藏”,那么overflow:hidden的意思就是“容器溢出时就隐藏溢出的”。

    html代码如下:

    <div id="chaochuyincang">我只设置了一行显示超出时隐藏</div>

    css代码:

    #chaochuyincang
    {
        width:100px;                              /* 设置div宽度为100像素 */
        white-space:nowrap;             /* 设置一行显示 */
        background-color:#FF0000;   /* 背景色设置为红色 */
        overflow:hidden;                       /* 设置超出部分自动隐藏 */
    }

    在浏览器中运行后效果如下图:

一行显示超出自动隐藏效果图

    通过上图,我们可以看到,我们在html源码中写了“我只设置了一行显示超出时隐藏”,可是运行的时候在浏览器中却只显示出了“我只设置了一”这几个字,多出来的都被隐藏了,但是查看源码你会发现,在源码中是显示完整了的,不信你可以试试。

    下面我们加上一行显示,超出后隐藏并加上省略号,html代码如下:

    <div id="chaochuyincang">我设置了一行显示超出时隐藏并加上省略号</div>

    css代码:

    #chaochuyincang
    {
        width:100px;                              /* 设置div宽度为100像素 */
        white-space:nowrap;             /* 设置一行显示 */
        background-color:#FF0000;   /* 背景色设置为红色 */
        overflow:hidden;                       /* 设置超出部分自动隐藏 */
        text-overflow:ellipsis;            /* 文本超出加省略号 */
    }

    实话际上我们只是在css代码中加入了“text-overflow:ellipsis”这一句,text-overflow:文本溢出,ellipsis:省略号。在浏览器中运行如下图所示:

一行显示超出自动隐藏并加省略号效果图

    此时,我们在上图中就可以看到,一行文本显示时,超出的部分隐藏了,并且加上了省略号了。

 

(注:欢迎转载,转载请注明来源于“村姑网-www.cunguer.com”,谢谢~!)