Избегайте подчеркивания пробела перед переносом строки в Chrome

Question

Следующий фрагмент правильно отображает (предполагая) без пробела, подчеркнутого в Firefox 59, но в Chromium 65 поддельное пространство в конце строки перед отображением явного разрыва строки:

<div style="width:100px">
  <a href="#">This is long link, <br />with a line break</a>
</div>

Скриншот из Chromium 65:

Снимок экрана из Firefox 59:

Очевидным решением для этого случая является удаление пробела перед разрывом строки, но это неестественно.

Не является ли один из рендеринга неправильным? Является ли поведение, указанное в спецификации HTML или CSS, или оно действительно не определено?

Редактировать 1 : То же поведение, что и в Firefox, можно наблюдать и в IE, поэтому похоже, что Chromium - единственный.

Answer 1

Проблема не в том, что Chrome подчеркивает конечный пробел, а Firefox - нет. Проблема в том, что Chrome не удаляет завершающий пробел при переносе строки (когда перенос происходит из жесткого <br /> переноса). Пробел подчеркнут, потому что он есть, что несовместимо с тем, как Chrome обрабатывает конечные пробелы при автоматическом переносе текста.

Спецификация CSS для обработки завершающих пробелов в обернутом тексте состояния:

4.1.3. Фаза II: Обрезка и позиционирование

Как выложена каждая строка,

1. Последовательность складных пробелов в начале строки удаляется.
2. Если размер вкладки равен нулю, вкладки не отображаются. В противном случае каждая вкладка отображается в виде горизонтального сдвига, который выравнивает начальный край следующего глифа с помощью следующей остановки табуляции. Остановки табуляции происходят в точках, кратных размеру табуляции от начального края содержимого блока. Размер вкладки задается свойством tab-size.
3. Последовательность складных пробелов в конце строки удаляется.
4. Если пробелы или символы табуляции в конце строки неразборчивы, но для них заданы пробелы, предварительно настроенные на перенос, UA должен либо повесить пробел, либо визуально свернуть ширину продвижения символов в любых переполненных пробелах так, чтобы они не занимать место в линии. Однако, если для overflow-wrap заданы пробелы, сворачивание их ширины перемещения не допускается, так как это предотвратит перенос сохраненных пробелов.

Рабочая группа CSS обсудила несогласованную обработку конечных пробелов в своем репозитории github, особо отметив, что обработка конечных пробелов в Firefox является наиболее идеальной:

И, наконец, есть точка, в которой конечные пробелы выглядят просто плохо, а наличие пробела непосредственно внутри закрывающего тега встроенного или перед <br> является достаточно распространенным непреднамеренным шаблоном разметки, который не должен оказывать плохого влияния на рендеринг. Сохраненное конечное пространство становится заметным как при встроенном стиле, как в примере, представленном @palemieux, так и при выборе выравнивания текста, отличного от start. Это дает реальный вариант использования, указывающий на предпочтение поведению Firefox.

Из этого обсуждения ранее упомянутая спецификация CSS была обновлена ​​ (в репозитории github, но пока еще не опубликована), чтобы соответствовать поведению Firefox (Gecko). В частности, обновление пунктов 1 и 3 сверху до:

Последовательность складных пробелов в начале строки (игнорируя любые промежуточные границы встроенного блока) удалена.

Последовательность складных пробелов в конце строки (игнорируя любые промежуточные границы встроенного блока) удалена.

Акцент на добавленные мной изменения.

Answer 2

Если мы проверяем спецификацию , мы можем прочитать это:

Подчеркивание, подчеркивание и переходы применяются только к тексту (включая пробел * 1007)*, межбуквенный и межсловный интервал): поля, границы и отступы пропускаются.