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

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

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

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

в 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 property / value. Это приведет к тому, что родительский объект будет выглядеть так, как вы ожидали. Если текст внутри родителя слишком широк, полосы прокрутки появляются внутри самого объекта. Это позволит сохранить структуру так, как вы хотите, чтобы она выглядела и предоставляла зрителю возможность прокрутки, чтобы увидеть больше.

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

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

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

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

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

так что:

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

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

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

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

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

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

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

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

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

Проверьте это решение. Как применить стиль обертки / продолжения строки и форматирование кода с помощью 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("&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); 

Добавьте в строку Zero width ( ​ ) и оберните ее.

Вот пример Javacript:

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

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

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

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

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