div中的长文本中断

Question

How can I fix the text so that it stays in line with the picture ? I have tried adding "word-wrap: break-word" but it doesn't work.

 /* tell the container's children to float left: */ .float-my-children > * { float:left; margin-right:5px; } /* this is called a clearfix. it makes sure that the container's children floats are cleared, without using extra markup */ .clearfix { *zoom:1 /* for IE */ } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } /* end clearfix*/ /* below is just to make things easier to see, not required */ body > div { border:1px dashed red; margin-bottom:10px; } 

 <div class="clearfix float-my-children"> <img src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Balzac.jpg/220px-Balzac.jpg" width=100> <div>some long text here here here here here here here here here here here here here here here here here here here here here here here here</div> </div> 

https://jsfiddle.net/u9zg4vLs/

Answer 1

将float:left仅添加到<img>标签

.float-my-children > img { float:left; margin-right:5px; }