我正在尝试创建一个在移动设备上显示的页面。它的布局是这样的:
/---------\ 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
如何打断比右侧长的单词并填充空白区域?
最佳答案
在长词中插入
软中断。有各种基于字典的 PHP 库可以为您做到这一点。
关于css - 打破 float 图像周围的长词,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6855979/