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

Ответ 1

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

Также см. связанные (возможно, повторяющиеся) вопросы:

• перенос слов в css/js
• fooobar.com/questions/15182/...

Ответ 2

в CSS3:

word-wrap:break-word

Ответ 3

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

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

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

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

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

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

так:

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

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

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

Ответ 7

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

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

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

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

Вы можете прочитать break-word

ИЗМЕНИТЬ

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

или

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

Ответ 8

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

Ответ 9

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

• Разделите текстовое поле на пробелы, чтобы получить все слова
• Итерируйте слова, которые ищут слова, длина которых превышает определенную сумму.
• Вставьте каждый символ x (например, каждые 25 символов).

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

Ответ 10

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

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);
    }

Ответ 11

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

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

Ответ 12

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

Вот пример Javacript:

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

Ответ 13

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

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

Ответ 14

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

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