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

в CSS3:

word-wrap:break-word

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

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+ */
}

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

надеюсь, что это помогает

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

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

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

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

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

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

так как:

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

но это только мое мнение.

редактировать: как cLFlaVA указывает... лучше использовать auto затем scroll. Я согласен с ним.

нет "идеального" решения HTML / CSS.

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

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

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

вы можете узнать break-word

EDIT

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

или

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

я уклоняюсь от проблемы, не имея моей правой боковой панели фиксированной так :P

вот что я делаю в ASP.NET:

1. разделить текстовое поле на пробелы, чтобы получить все слова
2. повторите слова, которые ищут слова, которые больше, чем определенное количество
3. вставить все X символов (например, каждые 25 символов.)

Я посмотрел на другие CSS-способы сделать это, но не нашел ничего, что работало в кросс-браузере.

на основе предложения Джона код, который я создал:

public static string WrapWords(string text, int maxLength)
    {
        string[] words = text.Split(' ');
        for (int i = 0; i < words.Length; i++)
        {
            if (words[i].Length > maxLength) //long word
            {
                words[i] = words[i].Insert(maxLength, " ");
                //still long ?
                words[i]=WrapWords(words[i], maxLength);
            }
        }
        text = string.Join(" ", words);
        return (text);
    }

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

(он разбивается на 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);

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

вот пример Javacript:

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

Я опубликовал решение, которое использует JavaScript и простое регулярное выражение, чтобы разбить длинное слово, чтобы его можно было обернуть, не нарушая макет вашего сайта.

обертывание длинных строк с помощью CSS и JavaScript

Я знаю, что это действительно старая проблема, и поскольку у меня была та же проблема, я искал простое решение. Как уже упоминалось в первом посте я решил использовать 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>

надеюсь, что это помогает.