欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
    1.单行实现文字省略号
    /*这里要显示的设置宽度*/
    overflow:hidden;
    white-space:nowrap;
    /*文字超出宽度则显示ellipsis省略号*/
    text-overflow:ellipsis;
    width:100%;
    2345截图20181015145014.png
    2.第几行实现文字省略号
    display:-webkit-box;
    -webkit-box-orient:vertical;/*设置方向*/
    -webkit-line-clamp:2;/*设置超过为省略号的行数*/
    overflow:hidden;
    使用webpack打包工具时,会忽视这个-webkit-box-orient属性,这里修改成下面的写法就可以了
    display:-webkit-box;
    overflow:hidden;
    /*autoprefixer:off*/
    -webkit-box-orient:vertical;
    /*autoprefixer:on*/
    -webkit-line-clamp:8;
    text-overflow:ellipsis;
    3.用js实现字数后加省略号
    if(title.length>26){
    title=title.substring(0,27)+"...";
    }
    4.换行word-break和word-wrap
    white-space:normal(自动换行),当写入的文字超过定义的宽度后会自动换行,但当写入的数据是一堆没有空格的字符或者字母或者数字时,超过容器的宽度时就会把容器撑大,不换行
    这时可以用:word-break:break-all;word-wrap:break-word来解决
    word-break:break-all在超过容器宽度时,若有一个单词很长,则会将单词截断,分开写
    word-wrap:break-word在超过容器宽度时,若有一个单词很长,则会将单词放到下一行,而不对单词进行截断
    word-break:normal|break-all|keep-all
    normal:允许在字内换行
    break-all:允许在单词内换行
    keep-all:只能在半角空格或连字符处换行。
    word-wrap:normal|break-word
    normal:允许内容顶开指定的容器边界
    break-word:内容将在边界内换行。如果需要,词内换行(word-break)也会发生







本文转载自中文网

 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c57316.shtml