Обновление: Обработка этого в 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');