如何让文字不超出边框

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

黑黑石头仔

2016-04-10 17:26

代码如下,结果如图,为什么文字会超出边框,不会自动转到下一行?如何让文字不超出边框


<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>填充</title>

<style type="text/css">

#box1{

    width:100px;

    height:100px;

    padding:10px;

    border:1px solid red;

}

</style>

</head>

<body>

<div id="box1">盒子1111111111111111111</div>

</body>

</html>

http://img.mukewang.com/570a1bc80001645402680272.jpg

写回答 关注

3回答

  • 该用户以后nice
    2016-04-10 18:33:48
    已采纳

    #box1{

        width:100px;

        height:100px;

        padding:10px;

        border:1px solid red;

        word-break : break-all

    }

    http://img.mukewang.com/570a2c0000011c0601590138.jpg

    黑黑石头仔

    非常感谢!

    2016-04-10 21:35:49

    共 1 条回复 >

  • 忆_卿
    2016-04-20 09:54:24

    文字 是 会自动换行的 。 字母和数字  要 用   word-break : break-all  才会自动换行。

  • 汉江怪人
    2016-04-10 17:30:11

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

    <title>填充</title>

    <style type="text/css">

    #box1{

        width:100px;

        height:100px;

        padding:10px;

        border:1px solid red;

    }

    </style>

    </head>

    <body>

    <div id="box1">盒子111111<br>1111111111111</div>

    </body>

    </html>


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

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

1225813 学习 · 18234 问题

查看课程

相似问题