盒子模型内容是数字怎么没跟着文字一样换行

来源:12-12 宰相肚里能撑船 - 使用padding为盒子设置内边距(填充)

iaaiNG

2018-07-08 22:39

https://img2.mukewang.com/5b4221d30001051411210560.jpg

如图,像这样

写回答 关注

2回答

  • NAHSION
    2018-07-08 23:40:17
    已采纳

    原因:浏览器在解析页面的时候,把这一串数字当成一个单词了,这样就不会自动切断字符串而进行换行。

    方法:用word-wrap:break-word

    和word-break:break-all 如

    div{
        background-color: #c8ff7e;
        width: 100px;
        height: 100px;
        word-break:break-all
    }

    word-wrap:break-word; 和 word-break:break-all 的区别
    1,word-break:break-all 例如div宽100px,它的内容就会到100px自动换行,如果该行末端有个英文单词很长,它会把单词截断。
    2,word-wrap:break-word 例子与上面一样,但区别就是它会把单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。


    iaaiNG

    非常感谢!

    2018-07-09 15:45:20

    共 1 条回复 >

  • 慕粉1474732573
    2018-07-08 23:23:35

    同问,我刚才也遇到这个问题,我自己手工加了个"<br>"来换行了。哈哈

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225811 学习 · 18234 问题

查看课程

相似问题