在前端开发中解决英文字母或数字在父元素中不会自动换行而导致溢出的问题

admin

文章最后更新时间:2024年05月17日

css.jpg

在前端开发过程中,经常会在文本中用到数字或英文字母表达,但你会发现中文文本在较小或条形容器中能正常换行和自动裁切,数字或英文字母则失效,这是为什么呢?通过排查的出结论:需要添加word-break:break-all属性,如下:

    overflow: hidden;  //多余裁切
    text-overflow: ellipsis;  //省略号
    display: -webkit-box;
    -webkit-line-clamp: 2;  //最多2行
    -webkit-box-orient: vertical;
    word-break: break-all;  //换行


文章版权声明:除非注明,否则均为十八码原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (暂无评论,341人围观)

还没有评论,来说两句吧...

目录[+]