打破在浮动图象附近的长的词 [英] break long word around floating image

问题描述

我想在移动设备上创建页面显示。其布局如下：

  / --------- \一些文本
 | |图片。一些
 |图像| 
 |周围的文本|图片。一些文字
 \ --------- /围绕图像。 
图像周围的一些字。 
图像周围的一些字。 
  

我使用浮动风格来实现：

 < div style =word-wrap：break-word; word-break：break-all;> 
< img src =someimg.jpgstyle =float：left;/> 
图像周围的一些文本。图像周围的一些文本。 ... 
< / div> 
  

但是，如果单词长度大于正确的最大长度但小于整个div

  / --------- \\ \\一些文本
 |左右|图片。 
 |图像| 
 | | 
 \ --------- / 
 a-word-long-right将
不会中断，只是在图像下方显示
，而a- word- 
长于全区域wi 
 ll-be-break-into-next-line 
  

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

解决方案

在长词中插入& shy; 软休止符。有很多PHP库可以为你做这些，基于字典。

I am trying to create a page display on mobile. Its layout like this:

/---------\ 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.

I use floating style to implement that:

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

However, if the word is longer than the right area max length but shorter than the whole div, it won't be break, instead it just be moved below the image.

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

How can I break the word longer than right side and fill the empty area up?

解决方案

Insert ­ soft-breaks in the long word. There are various PHP libraries that can do that for you, based on dictionaries.

这篇关于打破在浮动图象附近的长的词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！