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

Question

Я ищу список символов и элементов, которые могут разбивать строки HTML, такие как пробелы, но я не могу найти ни одной страницы в Интернете с определением, каково нормальное поведение разрыва строки HTML. Я нашел такие:

• делимое пространство,
• вкладка,
• новая линия
• Пространство нулевой ширины (азиатское)
• Меньше "-"
• Soft-дефис

Разумеется, я не ожидаю, что он будет добавлен в тег pre.

Answer 1

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

Ответ в том, что он не полностью определен и зависит от языка:

В большинстве систем письма при отсутствии переносов возможность мягкого переноса происходит только на границах слов. Многие такие системы используют пробелы или знаки препинания для явного разделения слов, и эти символы могут идентифицировать возможности мягкого переноса. Скрипты, такие как тайский, лаосский и кхмерский, однако, не используют пробелы или знаки препинания для разделения слов. Хотя пространство нулевой ширины (U+200B) может использоваться в качестве явного разделителя слов в этих сценариях, эта практика не распространена.

[...] CSS не в полной мере определяет, где возникают возможности мягкого переноса, однако для различения распространенных вариантов предусмотрены некоторые элементы управления.

Вы можете частично контролировать это поведение, используя некоторые свойства CSS, такие как

• line-break, чтобы указать, как упаковка взаимодействует с пунктуацией и символами
• word-break, что может позволить возможность мягкой переноски между буквами
• hyphens, чтобы контролировать, разрешен ли перенос слов для создания более мягких возможностей
• overflow-wrap / word-wrap, что может допускать произвольные разрывы внутри слова, чтобы предотвратить переполнение

Если вам нужен полный список символов, которые создают возможность мягкого переноса, вы можете использовать JS:

var log = console.log;
console.log = Function.prototype;
console.config({maxEntries: Infinity});
console.log = log;

var test = document.createElement('div');
test.className = 'test';
document.body.appendChild(test);
for (var i=0; i<0xffff; ++i) {
  var char = String.fromCharCode(i);
  test.textContent = 'a' + char + 'b';
  if (test.clientHeight > 1) {
    console.log(i.toString(16) + ': ' + JSON.stringify(char));
  }
}
document.body.removeChild(test);

.test {
  width: 0;
  line-height: 1px;
}
div.as-console-wrapper {
  max-height: 100%;
}