div中的长文本中断

Question

如何修复文字以使其与图片保持一致？ 我试过添加＆＃34;自动换行：break-word＆＃34;但它不起作用。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/u9zg4vLs/

Answer 1

仅将float:left添加到<img>代码

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