如何让文字不超出边框

源自：12-12 宰相肚里能撑船 - 使用padding为盒子设置内边距（填充）

如何让文字不超出边框

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

<!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>

提问者：黑黑石头仔 2016-04-10 17:26

个回答

该用户以后nice

2016-04-10 18:33:48

已采纳

#box1{
width:100px;
height:100px;
padding:10px;
border:1px solid red;
word-break : break-all
}

0
忆_卿

2016-04-20 09:54:24

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

1
汉江怪人

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>

0