在浮动图像周围打破长字

Question

我正在尝试在移动设备上创建页面显示.它的布局是这样的:

/---------\ some text around 
|         | the image. some
|  image  | text around the
|         | image. some text
\---------/ around the image.
some word around the image.
some word around the image.

我使用浮动样式来实现:

<div style="word-wrap: break-word; word-break: break-all;">
  <img src="someimg.jpg" style="float: left;"/>
  some text around the image. some text around the image. ...
</div>

但是,如果单词长度超过右侧区域最大长度但短于整个div,则不会中断,而只是将其移动到图像下方.

/---------\ some text around 
|         | the image.
|  image  | 
|         | 
\---------/ 
a-word-longer-than-right will
not be break and just display
below the image while a-word-
longer-than-the-whole-area-wi
ll-be-break-into-next-line

如何将这个词打破比右侧更长的时间并将空白区域填满？

Answer 1

在长单词中插入­软中断。有各种基于字典的 PHP 库可以为您做到这一点。