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

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

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

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

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

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

12.12.2008 17:03:49
Этот вопрос только что разбил Chrome - и ВСЕ его вкладки. Самый первый раз. Почему эта первая строка не переносится ?!
TheSoftwareJedi 12.12.2008 17:11:50
@TheSoftwareJedi - учитывая, что chrome должен обрабатывать вкладки независимо друг от друга, включая сбои, вы можете рассмотреть возможность сообщить об этом как об ошибке команде Google.
Corey Ballou 11.01.2010 13:28:41
+1 за вызов ТАК сотрудников. Похоже, они это исправили. :)
Tyler Crompton 9.11.2011 09:24:45
14 ОТВЕТОВ
РЕШЕНИЕ

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

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

7
23.05.2017 12:33:59

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

0
12.12.2008 17:06:11

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

так как:

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

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

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

5
12.12.2008 17:19:58

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

  1. Разделите текстовое поле на пробелы, чтобы получить все слова
  2. Повторяйте слова, ища слова, которые длиннее определенной суммы
  3. Вставьте каждые х символов (например, каждые 25 символов.)

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

0
12.12.2008 17:11:29

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

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

17
12.12.2008 17:12:20
Дополнительным преимуществом использования overflow: autoявляется исправление проблем с очисткой IE6, если у вас есть вложенные операции с плавающей точкой.
Corey Ballou 11.01.2010 13:27:06

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

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

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

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

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

РЕДАКТИРОВАТЬ

Ознакомьтесь с этим решением. Как применить стиль переноса строки / продолжения и форматирование кода с помощью CSS

или

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

2
23.05.2017 12:08:51
Я понимаю, но пользователи иногда делают это, поэтому должно быть какое-то решение, чтобы справиться с этим, чтобы макет не сломался. перенос слов работает только в IE.
Chris Bartow 12.12.2008 17:25:09

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

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);
    }
0
7.11.2009 19:28:48
C # (любимый StackOverflow)
Guillaume Massé 15.11.2011 04:06:01

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

Оборачивайте длинные строки, используя CSS и JavaScript

-1
11.01.2010 13:22:19

в CSS3:

word-wrap:break-word
120
18.10.2010 11:19:04
Этот работает для меня. И, кажется, хорошо поддерживается Chrome / IE.
Thomas 29.10.2010 22:17:12
Это прекрасно работает. Вы должны убедиться, что ширина установлена ​​или ограничена.
ekerner 20.04.2011 13:47:37
Несмотря на широкую поддержку переноса по словам, это свойство, по-видимому, было заменено на «overflow-wrap» в последней версии спецификации CSS3: впечатляющий web-каталог / new-css3-text-wrap overflow-wrap, по-видимому, не пока не поддерживается всеми основными браузерами, тогда как перенос по словам есть.
Jon Schneider 7.03.2012 15:54:44

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

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

-2
9.09.2011 15:01:35
Я не тот, кто отрицал, но ты прочитал вопрос? ОП сказал, что попробовал это без особой удачи. И, пожалуйста, отойдите от table(каламбур).
Tyler Crompton 9.11.2011 09:30:47

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

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

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

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

42
25.09.2011 09:54:58

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

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

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

6
23.12.2012 03:16:32

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

(Он разбит на 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("&shy;");
        }
        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);
0
4.09.2013 23:09:12

Добавьте Zero width space ( &#8203;) к строке, и она будет перенесена.

Вот пример Javacript:

let longWordWithOutSpace = 'pneumonoultramicroscopicsilicovolcanoconiosis';
// add &#8203; between every character to make it wrap
longWordWithOutSpace.split('').join('&#8203;');
0
22.06.2017 23:00:28