html - div中的长文本中断

Question

如何修改文字使其与图片保持一致？我试过添加“word-wrap: break-word”但它不起作用。

/* 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;
}