разбить длинное слово вокруг плавающего изображения - PullRequest
Новая
       39

разбить длинное слово вокруг плавающего изображения

6 голосов
/ 28 июля 2011

Я пытаюсь создать отображение страницы на мобильном телефоне.Его раскладка выглядит так: 

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

Как я могу разбить слово длиннее правой стороны и заполнить пустую область вверх?

Ответы [ 4 ]

3 голосов
/ 28 июля 2011

Вставить &shy; мягкие разрывы в длинном слове. Существуют различные библиотеки PHP, которые могут сделать это для вас, на основе словарей.

1 голос
/ 28 июля 2011

Может использовать 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);
0 голосов
/ 13 августа 2012

Для меня это решение было лучшим (с длинными словами и элементами с плавающей запятой): 

    -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 есть только проблемы.

0 голосов
/ 28 июля 2011

Вы можете посыпать тегами <wbr> длинное слово. Браузер будет использовать их, чтобы сломать, когда это необходимо. Если не нужно, оно не сломается там. Вот ваш пример с jsfiddle: http://jsfiddle.net/vAdPy/

Обратите внимание, что чем ближе теги <wbr> друг к другу, тем лучше будут результаты, поскольку в браузере будет больше возможностей найти подходящее место для разбивки длинного слова.

Вот PHP-скрипт для добавления <wbr> тегов в текст. 

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

Вставляет тег <wbr> после каждых двух символов (обратите внимание на две точки в регулярном выражении) длинного текста. Вы можете изменить количество точек в регулярном выражении, чтобы контролировать расстояние между двумя последовательными тегами <wbr>.

...