Как обернуть длинные строки без пробелов в HTML?
Если пользователь вводит длинную строку без пробелов или пробелов, форматирование прерывается, поскольку он выходит за пределы текущего элемента. Что-то типа:
HAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA.............................................................................................................................................
Я пробовал просто использовать wordwrap() в PHP, но проблема в том, что если есть ссылка или другой действительный HTML, он ломается.
Кажется, что в CSS есть несколько вариантов, но ни один из них не работает во всех браузерах. См. Перенос слов в IE.
Как решить эту проблему?
@TheSoftwareJedi - учитывая, что Chrome должен обрабатывать вкладки независимо, включая сбои, вы можете подумать о том, чтобы сообщить об этом команде Google как об ошибке.
+1 за вызов сотрудников ТАК. Похоже, они это исправили. :)
Ответы 14
Я избегаю проблемы, не фиксируя правую боковую панель следующим образом: P
Я бы поместил сообщение в div, у которого было бы переполнение фиксированной ширины для прокрутки (или для полного скрытия в зависимости от содержимого).
так нравится:
#post{
width: 500px;
overflow: scroll;
}
Но это только я.
Обновлено: Как указывает cLFlaVA ... лучше использовать auto, чем scroll. Я согласен с ним.
Вот что я делаю в ASP.NET:
- Разделите текстовое поле на пробелы, чтобы получить все слова
- Перебирайте слова в поисках слов, длина которых превышает определенное количество
- Вставьте каждые x символов (например, каждые 25 символов).
Я просмотрел другие способы сделать это на основе CSS, но не нашел ничего, что работало бы в кроссбраузерности.
Мне нравится использовать сочетание свойств / значений CSS overflow: auto. Это отобразит родительский объект так, как вы ожидаете. Если текст в родительском элементе слишком широкий, полосы прокрутки появляются внутри самого объекта. Это сохранит структуру так, как вы хотите, и предоставит зрителю возможность прокручивать, чтобы увидеть больше.
Обновлено: преимущество overflow: auto по сравнению с overflow: scroll заключается в том, что с auto полосы прокрутки будут появляться только при наличии переполненного содержимого. В scroll полосы прокрутки всегда видны.
Дополнительным преимуществом использования overflow: auto является то, что он устраняет проблемы очистки IE6, если у вас есть вложенные числа с плавающей запятой.
Не существует «идеального» решения HTML / CSS.
Решения либо скрывают переполнение (т.е. прокручиваются, либо просто скрываются), либо расширяются, чтобы соответствовать. Нет никакой магии.
В: Как поместить объект шириной 100 см в пространство шириной всего 99 см?
A: Вы не можете.
Вы можете прочитать слово-слово
РЕДАКТИРОВАТЬ
Пожалуйста, ознакомьтесь с этим решением Как применить стиль переноса / продолжения строки и форматирование кода с помощью css
или же
Как не допустить, чтобы длинные слова ломали мой div?
Я понимаю, но пользователи иногда делают это, поэтому должно быть какое-то решение, чтобы справиться с этим, чтобы макет не ломался. word-wrap работает только в IE.
Я лично не использовал его, но Переносчик выглядит многообещающим.
Также см. Связанные (возможно, повторяющиеся) вопросы:
на основе предложения Джона созданный мной код:
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);
}
C# (любимый StackOverflow)
Я опубликовал решение, которое использует JavaScript и простое регулярное выражение, чтобы разбить длинное слово, чтобы его можно было обернуть, не нарушая макета вашего веб-сайта.
в CSS3:
word-wrap:break-word
Этот мне подходит. И, кажется, хорошо поддерживается Chrome / IE.
Это прекрасно работает. Вам нужно убедиться, что ширина установлена или привязана.
Несмотря на широкую поддержку переноса слов, это свойство, по-видимому, было заменено на «overflow-wrap» в последней версии спецификации CSS3: amazingwebs.com/new-css3-text-wrap overflow-wrap, похоже, пока не поддерживается ни одним из основных браузеров, однако, тогда как перенос слов есть.
Я знаю, что это действительно старая проблема, и, поскольку у меня была такая же проблема, я искал простое решение. Как упоминалось в первом посте, я решил использовать перенос слов php-функцией.
Дополнительную информацию см. В следующем примере кода ;-)
<?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"> </td>
<td width = "100"> </td>
</tr>
</table>
</body>
</html>
Надеюсь это поможет.
Я не тот, кто проголосовал против, но вы читали вопрос? Оператор сказал, что ему не повезло. И, пожалуйста, отойдите от table (каламбур).
Я пытался решить ту же проблему и нашел решение здесь:
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+ */
}
Идея состоит в том, чтобы использовать их все, чтобы улучшить кроссбраузерность.
Надеюсь это поможет
Я удивлен, что никто не упомянул одно из моих любимых решений этой проблемы - тег <wbr> (необязательный перенос строки). Это довольно хорошо поддерживается в браузерах и, по сути, сообщает браузеру, что может вставляет разрыв строки, если это необходимо. Есть также связанный с этим символ пробела нулевой ширины, ​ с тем же значением.
Для упомянутого варианта использования, отображающего комментарии пользователей на веб-странице, я бы предположил, что уже существует некоторое форматирование вывода для предотвращения атак с помощью инъекций и т. д. Таким образом, просто добавить эти теги <wbr> через каждые символы N в слишком длинных словах, или в ссылках.
Это особенно полезно, когда вам нужен контроль над форматом вывода, что не всегда позволяет CSS.
Я не хотел добавлять библиотеки на свои страницы только для разбора слов. Затем я написал простую функцию, которую привожу ниже, надеюсь, она поможет людям.
(Он разбивается на 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('​');
Этот вопрос только что разбил Chrome - и ВСЕ его вкладки. Самый первый раз. Почему первая строка не переносится ?!