Обновление. Обработка этого в CSS удивительно проста и требует минимальных затрат, но вы не можете контролировать, где возникают прерывания, когда они появляются. Это нормально, если вам все равно, или ваши данные проходят длинный буквенно-цифровой цикл без каких-либо естественных разрывов. У нас было много длинных путей к файлам, URL-адресов и телефонных номеров, и у каждого из них есть места, куда лучше взломать, чем другие.
Наше решение состояло в том, чтобы сначала использовать замену регулярного выражения, чтобы поместить пробел нулевой ширины () после каждых 15 (скажем) символов, которые не являются пробелами, или одного из специальных символов, где мы предпочли бы разрывы. Затем мы выполняем другую замену, помещая пробел нулевой ширины после этих специальных символов.
Пробелы нулевой ширины - это хорошо, потому что они никогда не видны на экране; застенчивые дефисы сбивали с толку, когда показывались, потому что в данных есть значимые дефисы. Пробелы нулевой ширины также не включаются при копировании текста из браузера.
В настоящее время мы используем специальные символы разрыва: точка, косая черта, обратная косая черта, запятая, подчеркивание, @, | и дефис. Вы бы не подумали, что вам нужно что-то делать, чтобы поощрять разрыв после дефисов, но Firefox (по крайней мере, 3.6 и 4) сам по себе не разбивает дефисы, окруженные цифрами (например, телефонные номера).
Мы также хотели контролировать количество символов между искусственными разрывами в зависимости от доступного пространства макета. Это означало, что регулярное выражение для сопоставления длинных непрерывных прогонов должно быть динамическим. Это вызывается очень часто, и мы не хотели создавать одни и те же идентичные регулярные выражения снова и снова по соображениям производительности, поэтому мы использовали простой кеш регулярных выражений, управляемый выражением регулярного выражения и его флагами.
Вот код; вы, вероятно, назвали бы функции в служебном пакете:
makeWrappable = function(str, position)
{
if (!str)
return '';
position = position || 15; // default to breaking after 15 chars
// matches every requested number of chars that's not whitespace or one of the special chars defined below
var longRunsRegex = cachedRegex('([^\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^\\s\\.\/\\,_@\\|-])', 'g');
return str
.replace(longRunsRegex, '$1​') // put a zero-width space every requested number of chars that's not whitespace or a special char
.replace(makeWrappable.SPECIAL_CHARS_REGEX, '$1​'); // and one after special chars we want to allow breaking after
};
makeWrappable.SPECIAL_CHARS_REGEX = /([\.\/\\,_@\|-])/g; // period, forward slash, backslash, comma, underscore, @, |, hyphen
cachedRegex = function(reString, reFlags)
{
var key = reString + (reFlags ? ':::' + reFlags : '');
if (!cachedRegex.cache[key])
cachedRegex.cache[key] = new RegExp(reString, reFlags);
return cachedRegex.cache[key];
};
cachedRegex.cache = {};
Тестируйте так:
makeWrappable('12345678901234567890 12345678901234567890 1234567890/1234567890')
Обновление 2. Похоже, что пробелы нулевой ширины на самом деле включены в скопированный текст по крайней мере в некоторых случаях, вы просто не можете их видеть. Очевидно, что поощрение людей копировать текст со скрытыми символами - это приглашение ввести такие данные в другие программы или системы, даже в вашу собственную, где это может вызвать проблемы. Например, если он попадает в базу данных, поиск по нему может завершиться неудачно, и такие строки поиска также могут не сработать. Использование клавиш со стрелками для перемещения по таким данным требует (справедливо) дополнительного нажатия клавиши для перемещения по персонажу, которого вы не видите, что несколько странно для пользователей, если они это заметят.
В закрытой системе вы можете отфильтровать этот символ при вводе, чтобы защитить себя, но это не помогает другим программам и системам.
В общем, эта техника работает хорошо, но я не уверен, какой будет лучший выбор персонажа, вызывающего поломку.
Обновление 3: появление этого персонажа в данных больше не является теоретической возможностью, это наблюдаемая проблема. Пользователи отправляют данные, скопированные с экрана, они сохраняются в базе данных, поиск прерывается, вещи странно сортируются и т. Д.
Мы сделали две вещи:
- Написал утилиту для удаления их из всех столбцов всех таблиц во всех источниках данных для этого приложения.
- Добавлена фильтрация, чтобы удалить его в наш стандартный процессор ввода строк, поэтому он исчезнет к тому времени, когда любой код его увидит.
Это хорошо работает, как и сама техника, но это поучительная история.
Обновление 4: мы используем это в контексте, где данные, передаваемые в него, могут быть экранированными в HTML. При правильных обстоятельствах он может вставлять пробелы нулевой ширины в середину HTML-сущностей, что дает необычный результат.
Исправление заключалось в том, чтобы добавить амперсанд в список символов, которые мы не разбиваем, например:
var longRunsRegex = cachedRegex('([^&\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^&\\s\\.\/\\,_@\\|-])', 'g');
person
enigment
schedule
28.06.2011
word-wrap: break-word;В зависимости от того, что вы хотите поддерживать, могут потребоваться префиксы браузера. Также имейте в виду, что элемент или родительский элемент (какой бы элемент ни определял, какую ширину вы хотите разрешить) должны иметь определенную ширину, иначе перенос слов не вступит в силу. Надеюсь, это поможет. - person Tom Walker schedule 23.01.2016