文字换行

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

.one{

width: 1000px;

height: 500px;

margin: 0 auto;

}

dl{

width: 500px;

float: left;

}

</style>

</head>

<body>

<div>

<dl>

</dl>

<dl>

</dl>

</div>

</body>

</html>

为什么图片下面的文字不会自己根据容器的宽度换行。

chriose 2017-08-11

源自：项目：网页布局案例 2-7 编程练习

收起

3回答

好帮手慕糖 2017-08-11 13:53:08

你好，这里跟输入的有关系：这一串字母，中间没有分隔，计算机容易把它识别为一个单词。然后就不分割了，正常的文字是可以换行的。祝学习愉快~

收起回答

qq_天天_66 2017-08-11 12:11:00

我感觉是dldd的有默认样式强制不换行

收起回答

qq_天天_66 2017-08-11 11:12:53

加个

dl{

width: 500px;

float: left;

word-break: break-all;

}

收起回答

提问者 chriose #1

我就是想让文字随宽度自适应，不加任何设置，只给dl设置固定宽高

2017-08-11 11:14:25
提问者 chriose #2

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> *{ margin: 0; padding:0; } .one{ width: 700px; margin: 0 auto; } dl{ width: 400px; border: 1px solid red; } img{ height: 240px; } .two{ width: 240px; } </style> <body> <div class="one"> <img src="http://img1.sycdn.imooc.com/climg//58f8290f0001558804260240.jpg" alt=""></dt> <div class="two">maybe you cold maybe youmaybe youmaybe youmaybe youmaybe youmaybe youmaybe youmaybe youmaybe youmaybe youmaybe youmaybe youmaybe you wieiquwerqwuiruiewurweouqew iqrqwerr赵燕要求的需求日期可能赶不上，根据沟通，电商预估在定稿后一周内可以生产完成，物流还需要2天左右的时间，请知悉。赵燕要求的需求日期可能赶不上，根据沟通，电商预估在定稿后一周内可以生产完成，物流还需要2天左右的时间，请知悉。赵燕要求的需求日期可能赶不上，根据沟通，电商预估在定稿后一周内可以生产完成，物流还需要2天左右的时间，请知悉。赵燕要求的需求日期可能赶不上，根据沟通，电商预估在定稿后一周内可以生产完成，物流还需要2天左右的时间，请知悉。qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq123213213312312312331221313123321</div> </dl> </div> </body> </html> 这段文字里面，规律的文字就可以自动根据容器换行，不规律的就不会，我是这样理解，不知道对不对，。谁能指导我下。

2017-08-11 11:20:58