Подтвердить что ты не робот

Как разрешить текст, если необходимо, обернуть внутри слова?

Я ищу лучшее решение, позволяющее текстуру обернуться посреди слова, если это необходимо. В лучшем случае, я имею в виду большинство совместимых с браузером и предпочитаю разрывы слов, прежде чем он сломается внутри слова.

Это также помогло бы, если бы разметка выглядела лучше, чем моя (см. мой ответ).

Edit:

Обратите внимание, что это специально для пользовательского контента.

Изменить 2:

Около 25% пользователей Firefox на рассматриваемом сайте все еще используют v3.0 или ниже, поэтому очень важно их поддерживать. Это основано на данных за последний месяц (около 121 000 посещений).

4b9b3361

ОТВЕТЫ

Ответ 1

Поскольку нет окончательного ответа (зависит от ваших потребностей, например, вы хотите дефисы, какие браузеры вы должны поддерживать?), я провел некоторое исследование через Adobe BrowserLab, чтобы узнать, какие варианты:

Если вам не нужны дефисы, вы получите лучшую совместимость с помощью <wbr>. Если вам нужны дефисы, то лучше всего использовать &shy;, но обратите внимание, что это не сработает (оберните в char) в Firefox 2.0 Mac/Windows или Safari 3.0.

И обратите внимание, что если вы решите не обрабатывать длинные слова вообще, используя переполнение, прокрутите или разрешите перенос на символ, оба IE6 и IE7 ответят, расширив ширину контейнера (по крайней мере, с помощью DIV, который я использовал), так что будьте осторожны.

Результаты:

Browser                     Method                   Wraps at char    Adds Hyphens    Overflows horizontally    Container expands horizontally
----------------------------------------------------------------------------------------------------------------------------------------------
Firefox 3.0 - Windows XP    None                     No               No              Yes                       No
Firefox 3.0 - Windows XP    <wbr>                    Yes              No              No                        No
Firefox 3.0 - Windows XP    &shy; or &#173;          Yes              Yes             No                        No
Firefox 3.0 - Windows XP    word-wrap: break-word    No               No              Yes                       No
IE7 - Windows XP            None                     No               No              No                        Yes
IE7 - Windows XP            <wbr>                    Yes              No              No                        No
IE7 - Windows XP            &shy; or &#173;          Yes              Yes             No                        No
IE7 - Windows XP            word-wrap: break-word    Yes              No              No                        No
Firefox 3.0 - OS X          None                     No               No              Yes                       No
Firefox 3.0 - OS X          <wbr>                    Yes              No              No                        No
Firefox 3.0 - OS X          &shy; or &#173;          Yes              Yes             No                        No
Firefox 3.0 - OS X          word-wrap: break-word    No               No              Yes                       No
Safari 3.0 - OS X           None                     No               No              Yes                       No
Safari 3.0 - OS X           <wbr>                    Yes              No              No                        No
Safari 3.0 - OS X           &shy; or &#173;          No               No              No                        No
Safari 3.0 - OS X           word-wrap: break-word    Yes              No              No                        No
Chrome 3.0 - Windows XP     None                     No               No              Yes                       No
Chrome 3.0 - Windows XP     <wbr>                    Yes              No              No                        No
Chrome 3.0 - Windows XP     &shy; or &#173;          Yes              Yes             No                        No
Chrome 3.0 - Windows XP     word-wrap: break-word    Yes              No              No                        No
Firefox 2.0 - OS X          None                     No               No              Yes                       No
Firefox 2.0 - OS X          <wbr>                    Yes              No              No                        No
Firefox 2.0 - OS X          &shy; or &#173;          No               No              Yes                       No
Firefox 2.0 - OS X          word-wrap: break-word    No               No              Yes                       No
Firefox 2.0 - Windows XP    None                     No               No              Yes                       No
Firefox 2.0 - Windows XP    <wbr>                    Yes              No              No                        No
Firefox 2.0 - Windows XP    &shy; or &#173;          No               No              Yes                       No
Firefox 2.0 - Windows XP    word-wrap: break-word    No               No              Yes                       No
Firefox 3.5 - Windows XP    None                     No               No              Yes                       No
Firefox 3.5 - Windows XP    <wbr>                    Yes              No              No                        No
Firefox 3.5 - Windows XP    &shy; or &#173;          Yes              Yes             No                        No
Firefox 3.5 - Windows XP    word-wrap: break-word    Yes              No              No                        No
Firefox 3.5 - OS X          None                     No               No              Yes                       No
Firefox 3.5 - OS X          <wbr>                    Yes              No              No                        No
Firefox 3.5 - OS X          &shy; or &#173;          Yes              Yes             No                        No
Firefox 3.5 - OS X          word-wrap: break-word    Yes              No              No                        No
IE6 - Windows XP            None                     No               No              No                        Yes
IE6 - Windows XP            <wbr>                    Yes              No              No                        No
IE6 - Windows XP            &shy; or &#173;          Yes              Yes             No                        No
IE6 - Windows XP            word-wrap: break-word    Yes              No              No                        No
IE8 - Windows XP            None                     No               No              Yes                       No
IE8 - Windows XP            <wbr>                    Yes              No              No                        No
IE8 - Windows XP            &shy; or &#173;          Yes              Yes             No                        No
IE8 - Windows XP            word-wrap: break-word    Yes              No              No                        No
Safari 4.0 - OS X           None                     No               No              Yes                       No
Safari 4.0 - OS X           <wbr>                    Yes              No              No                        No
Safari 4.0 - OS X           &shy; or &#173;          Yes              Yes             No                        No
Safari 4.0 - OS X           word-wrap: break-word    Yes              No              No                        No

Пример HTML:

<html>
    <head>
        <style>
            div {
                width: 4em;
                border: 1px solid black;
                margin-bottom: 6em;
                padding: .25em;
            }
        </style>    
    </head>
    <body>
        This is text easily contained by the DIV:
        <div>proper width</div>

        A long word with no character breaking:
        <div>
            AReallyLongWordThatNeedsToBeBroken AndAnotherWord
        </div>

        <i>&lt;wbr&gt;</i> tag:
        <div>
            A<wbr>R<wbr>e<wbr>a<wbr>l<wbr>l<wbr>y<wbr>L<wbr>o<wbr>n<wbr>g<wbr>W<wbr>o<wbr>r<wbr>d<wbr>T<wbr>h<wbr>a<wbr>t<wbr>N<wbr>e<wbr>e<wbr>d<wbr>s<wbr>T<wbr>o<wbr>B<wbr>e<wbr>B<wbr>r<wbr>o<wbr>k<wbr>e<wbr>n A<wbr>n<wbr>d<wbr>A<wbr>n<wbr>o<wbr>t<wbr>h<wbr>e<wbr>r<wbr>W<wbr>o<wbr>r<wbr>d
        </div>

        <i>&amp;shy;</i> character:
        <div>
            A&shy;R&shy;e&shy;a&shy;l&shy;l&shy;y&shy;L&shy;o&shy;n&shy;g&shy;W&shy;o&shy;r&shy;d&shy;T&shy;h&shy;a&shy;t&shy;N&shy;e&shy;e&shy;d&shy;s&shy;T&shy;o&shy;B&shy;e&shy;B&shy;r&shy;o&shy;k&shy;e&shy;n A&shy;n&shy;d&shy;A&shy;n&shy;o&shy;t&shy;h&shy;e&shy;r&shy;W&shy;o&shy;r&shy;d
        </div>

        <i>overflow: scroll</i> CSS attribute:
        <div style="overflow: scroll">
            AReallyLongWordThatNeedsToBeBroken AndAnotherWord
        </div>

        <i>word-wrap: break-word</i> CSS attribute:
        <div style="word-wrap: break-word">
            AReallyLongWordThatNeedsToBeBroken AndAnotherWord
        </div>
    </body>
</html>

Ответ 2

Свойство css word-wrap: break-word заставит длинные слова обернуться к следующей строке, если они слишком длинны для их контейнера. Это поддерживается IE (путь назад), Firefox и Safari.

Изменить. Похоже, что вы можете достичь этого и в старых версиях Firefox, используя white-space: -moz-pre-wrap и white-space: pre-wrap. Подробнее см. здесь. Я не тестировал это со старыми версиями Firefox.

Ответ 3

Мой ответ из другого экземпляра этого вопроса, найденного в Обертывание длинного текста в CSS:

Я использую комбинацию

word-wrap: break-word;
overflow: hidden;

чтобы справиться с этим. Параметр word-wrap позволяет обернуть слово, несмотря на его длину в браузерах, которые поддерживают это свойство, в то время как параметр overflow приведет к его обрезанию в конце доступного пространства в браузерах, которые не распознают word-wrap. Это как изящная деградация, которую вы, скорее всего, получите, не перейдя на javascript.

Ответ 4

[ Изменить: OP обновил свой вопрос, чтобы сказать, что это специально для контента, созданного пользователем; ниже будет (легко) работать для этого (у вас должен быть собственный словарь переносов). Если оставить его здесь, на случай, если кто-то найдет этот вопрос и ему понадобится HTML-вариант для этого.]

Вы можете использовать мягкий дефис (ака необязательный дефис; &shy; или &#173;). Он был определен еще в HTML4. Я никогда не использовал его, но я просто попытался, и он работает в: IE6, IE7, Chrome 4, FF 3.6 и Safari 4 для Windows по крайней мере.

Можно утверждать, что пользовательский агент (браузер) должен обрабатывать это автоматически (используя словарь переносов для языка, на котором находится документ). На практике я не знаю ни одного веб-браузера, который делает это автоматически. По-видимому, современные браузеры делают, если вы им сообщаете, что они могут; см. ответ wsanville для параметра CSS.

Ответ 5

Вы можете проверить свойство word-wrap: break-word CSS.

Следующий пример работает в Google Chrome 4.0, Firefox 3.5.7, Safari 4.0.4 и IE 8:

<html>
<body>
    <div style="word-wrap: break-word; width: 50px;">
        Loremipsumdolorsitametconsectetueradipiscingelitselaoreetdoloremagnaaliq
    </div>
</body>
</html>

К сожалению, как отметил BalusC в комментарии к одному из ответов, вышеприведенный будет не работает в версиях Firefox старше 3.5. Поскольку население пользователей, использующих старые версии Firefox кажется, ниже ~ 6%, как отмеченное TJ Crowder, вы можете отказаться от overflow: scroll для браузеров, которые не поддерживают word-wrap. Это может показаться не очень приятным, но если вы не ожидаете, что многие слова будут длиннее выделенного пространства, вероятность того, что один из пользователей увидит полосу прокрутки, будет очень низкой, и со временем она будет еще ниже, и пользователи обновляют свои браузеры. По крайней мере, вы бы изящно потерпели неудачу в этих ситуациях.

Ответ 6

Я нашел аналогичный ответ здесь: http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

Более надежная поддержка браузера

Только CSS

-ms-word-break: break-all;

     /* Be VERY careful with this, breaks normal words wh_erever */
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

Если ваш текст сгенерирован PHP, у вас есть функция PHP:

wordwrap

<?php
  $text = "The quick brown fox jumped over the lazy dog.";
  $newtext = wordwrap($text, 20, "<br />\n");

  echo $newtext;
?>

Кроме того, вы можете попробовать функцию PHP explode, если у вас есть и знаете разделитель. Отображать после цикла for (explode возвращает массив).

Ответ 7

В прошлом я использовал что-то вроде этого (которое в то время не работало на Safari, IIRC, но это было несколько лет назад):

A<wbr>V<wbr>e<wbr>r<wbr>y<wbr>L<wbr>o<wbr>n<wbr>g<wbr>W<wbr>o<wbr>r<wbr>d A<wbr>n<wbr>d<wbr>A<wbr>n<wbr>o<wbr>t<wbr>h<wbr>e<wbr>r<wbr>W<wbr>o<wbr>r<wbr>d

(Я бы сгенерировал это динамически, так что человеку, выполняющему макет, не пришлось бы смотреть на такое зверство.)

Ответ 8

Введите разрыв строки клавиатуры в точке, в которой вы хотите ее сломать.

например.

Thisisaverylongword

станет

Thisisavery длинное слово