Как переносить длинные строки без пробелов в 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> (дополнительный разрыв строки) тег. Это справедливо хорошо поддерживается в браузерах и по существу сообщает браузеру, что это can вставить разрыв строки, если это необходимо. Существует также связанный символ пробела нулевой ширины,​ с тем же смыслом.

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

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

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

так как:

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

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

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

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

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

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

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

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

редактировать

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

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