温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

使用css实现文字溢出省略号的方法有哪些

发布时间:2022-03-01 09:22:03 来源:亿速云 阅读:149 作者:小新 栏目:web开发

小编给大家分享一下使用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)也会发生


以上是“使用css实现文字溢出省略号的方法有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI