Как обернуть длинные строки без пробелов в HTML?

Question

Если пользователь вводит длинную строку без пробелов или пробелов, он прервет форматирование, перейдя шире, чем текущий элемент. Что-то вроде:

HAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA .............................................. .................................................. .............................................

Я пытался просто использовать wordwrap() в PHP, но проблема в том, что если есть ссылка или какой-то другой допустимый HTML, он ломается.

Кажется, в CSS есть несколько опций, но ни один из них не работает во всех браузерах. См. Перенос слов в IE.

Как вы решаете эту проблему?

Answer 1

в CSS3:

word-wrap:break-word

Answer 2

Я пытался решить ту же проблему и нашел решение здесь:

http://perishablepress.com/press/2010/06/01/wrapping-content/

Решение: добавление в контейнер следующих свойств CSS

div {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}

Идея состоит в том, чтобы использовать их все, чтобы обеспечить лучшую совместимость с различными браузерами

Надеюсь, это поможет

Answer 3

Мне нравится использовать overflow: auto CSS свойство / значение. Это отобразит родительский объект так, как вы ожидаете его появления. Если текст в родительском объекте слишком широкий, полосы прокрутки появляются внутри самого объекта. Это сохранит структуру так, как вы хотите, чтобы она выглядела, и предоставит зрителю возможность прокрутки, чтобы увидеть больше.

Редактировать: хорошая вещь в overflow: auto по сравнению с overflow: scroll в том, что при auto полосы прокрутки появляются только при наличии переполнения содержимого. При scroll полосы прокрутки всегда видны.

Answer 4

Я лично им не пользовался, но Гипенатор выглядит многообещающе.

Также см. Связанные (возможно, дублирующие) вопросы:

• перенос слов в css / js
• Кто решил проблему длинных слов-ломает-мое-див? (подсказка: не переполнение стека)

Answer 5

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

Для упомянутого варианта использования, отображающего комментарии пользователей на веб-странице, я бы предположил, что уже есть некоторое форматирование вывода для предотвращения атак с использованием инъекций и т. Д. Поэтому просто добавить эти <wbr> теги каждые N символов слишком длинные слова или ссылки.

Это особенно полезно, когда вам нужно контролировать формат вывода, что CSS не всегда позволяет вам сделать.

Answer 6

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

так как:

#post{
    width: 500px;
    overflow: scroll;
}

Но это только я.

РЕДАКТИРОВАТЬ: Как cLFlaVA указывает ... лучше использовать auto, чем scroll. Я согласен с ним.

Answer 7

Не существует «идеального» решения HTML / CSS.

Решения либо скрывают переполнение (т.е. прокрутку или просто скрывают), либо расширяют для соответствия. Там нет магии.

В: Как вы можете поместить объект шириной 100 см в пространство шириной всего 99 см?

A: Вы не можете.

Вы можете прочитать брейк-слово

EDIT

Пожалуйста, проверьте это решение Как применить стиль переноса строки / продолжения и форматирование кода с помощью css

или

Как не дать длинным словам сломать мой div?

Answer 8

Добавьте пробел нулевой ширины (​) к строке, и он будет перенесен.

Вот пример Javacript:

let longWordWithOutSpace = 'pneumonoultramicroscopicsilicovolcanoconiosis';
// add ​ between every character to make it wrap
longWordWithOutSpace.split('').join('​');

Answer 9

Я не хотел добавлять библиотеки на свои страницы только для разрыва слов. Затем я написал простую функцию, которую я предоставляю ниже, надеюсь, она поможет людям.

(он разбит на 15 символов и применяет «& shy;» между ними, но вы можете легко изменить его в коде)

//the function:
BreakLargeWords = function (str)
{
    BreakLargeWord = function (word)
    {
        var brokenWords = [];
        var wpatt = /\w{15}|\w/igm;
        while (wmatch = wpatt.exec(word))
        {
            var brokenWord = wmatch[0];
            brokenWords.push(brokenWord);
            if (brokenWord.length >= 15) brokenWords.push("­");
        }
        return brokenWords.join("");
    }

    var match;
    var word = "";
    var words = [];
    var patt = /\W/igm;
    var prevPos = 0;
    while (match = patt.exec(str))
    {
        var pos = match.index;
        var len = pos - prevPos;
        word = str.substr(prevPos, len);

        if (word.length > 15) word = BreakLargeWord(word);

        words.push(word);
        words.push(match[0]);
        prevPos = pos + 1;
    }
    word = str.substr(prevPos);
    if (word.length > 15) word = BreakLargeWord(word);
    words.push(word);
    var text = words.join("");
    return text;
}

//how to use
var bigText = "Why is this text this big? Lets do a wrap <b>here</b>! aaaaaaaaaaaaa-bbbbb-eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
var goodText = BreakLargeWords(bigText);

Answer 10

Я знаю, что это действительно старая проблема, и, поскольку у меня была та же проблема, я искал простое решение. Как уже упоминалось в первом посте, я решил использовать php-функцию wordwrap.

См. Следующий пример кода для информации; -)

<?php
    $v = "reallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglink";
    $v2 = wordwrap($v, 12, "<br/>", true);
?>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <table width="300" border="1">
            <tr height="30">
                <td colspan="3" align="center" valign="top">test</td>
            </tr>
            <tr>
                <td width="100"><a href="<?php echo $v; ?>"><?php echo $v2; ?></a></td>
                <td width="100">&nbsp;</td>
                <td width="100">&nbsp;</td>
            </tr>
        </table>
    </body>
</html>

Надеюсь, это поможет.