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

Answer 2

可以使用PHP来准备文本块，缩短长字，例如......

    $words = explode(' ',$str);
    foreach ($words as $word) {
        if (strlen($word) > 20) {
            $part1 = substr($word,0,20);
            $part2 = substr($word,21);
            $newwords[] = $part1 .' '. $part2;
        } else {
            $newwords[] = $word;
        }
    }
    $newstr = implode(' ',$newwords);

Answer 3

您可以在长字中撒上个标签。浏览器将在需要时使用它们来中断。如果不需要，它不会在那里打破。这是你的jsfiddle示例修复：http://jsfiddle.net/vAdPy/

请注意，标记越接近彼此，您获得的效果就越好，因为浏览器有更多选项可以找到合适的地方来打破长字。

这是一个将标记洒入文本的PHP脚本。

<?php
    $word = 'thisisaverylongword';
    $wbr_word = preg_replace('/(..)/', '\\1<wbr>', $word);

    // $wbr_word is now "th<wbr>is<wbr>is<wbr>av<wbr>er<wbr>yl<wbr>on<wbr>gw<wbr>or<wbr>d"
?>

这会在长文本的每两个字符（请注意正则表达式中的两个点）之后插入标记。您可以更改正则表达式中的点数，以控制两个连续标记之间的距离。

Answer 4

对我来说，这个解决方案是最好的（使用长词和浮点元素）：

    -ms-word-break: break-all;
     word-break: break-all;
     word-break: break-word;
     -webkit-hyphens: auto;
     -moz-hyphens: auto;
     hyphens: auto;

http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/

Chrome中只有问题。

在浮动图像周围打破长字

4 个答案: