css - 打破 float 图像周围的长词

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.

我使用 float 样式来实现:

<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 库可以为您做到这一点。