百变鹏仔-专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > CSS > 正文

文本溢出 关于 text-overflow 的介绍 以及white-space的介绍

作者:鹏仔先生日期:2020-06-02 11:53:00浏览:1749分类:CSS

文本溢出

    语法:

text-overflow: clip  |  ellipsis;

    clip不显示省略号,溢出文本被裁剪


    cllipsis 显示省略号(省略号相关属性要给文本所在容器设置,不能越级设置)

    注:单行文本省略号设置必须满足以下四个条件,缺一不可;

    ①给容器一个固定的宽度 width: 数值+单位;

    ②设置文本强制在一行显示 white-space: nowrap;

    ③容器溢出隐藏 overflow: hidden;

    ④文本溢出显示省略号 text-overflow: ellipsis;

    eg:

div{
    width: 数值+单位;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


white-space介绍:

    语法:

white-space: normal  |  nowrap  |  pre  |  pre-wrap  |  pre-line;

    normal: 默认值,常规显示;

    nowrap: 强制在一行显示;

    pre: 保留空白符,强制在一行显示;

    pre-wrap: 保留空白符,换行;

    pre-line: 合并空白符,保留换行符;


手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯