Альтернативный вариант CSS3?

Есть ли альтернатива для свойства bikeshedding CSS3? Он пока не поддерживается.

ОТВЕТЫ

Ответ 1

Свойство белого пробела

В CSS3, свойство white-space является сокращением для white-space-collapsing (я думаю, bikeshedding означает, что они еще не знают, что назвать его) и text-wrap. Свойством white-space является свойство CSS 2.1, поддерживаемое большинством браузеров, и для него два значения, которые сбрасывают новые строки:

  • normal (Начальное значение).
  • nowrap

Но что означают символы разворота строки?

Согласно CSS 2.1:

Если для "белого пространства" установлено значение "normal" или 'nowrap', символы перевода строки преобразуется для один из следующих символов: a пробел, пространство с нулевой шириной символ (U + 200B) или символ (т.е. не отображается), согласно Индивидуальные алгоритмы, основанные на content script.

Согласно CSS 3:

Пространство нулевой ширины до или после пробел, содержащий Новая строка вызывает всю последовательность пустое пространство для обрушения в нуль пространство ширины.

Реальность:

Большинство браузеров преобразуют символы перевода строки в пространство. Так что вы действительно хотите установить свойство white-space-collapsing на discard not collapse или на collapse, а затем добавить символ пробела ширины до разрыва строки.

Что делать до поддержки браузера

Удалить пустое пространство из вашего документа HTML:

<span>A</span>
<span>B</span>

To:

<span>A</span><span>B</span>

Или:

<span>A</span><span>
    B</span>

Ответ 2

Всегда самое очевидное исправление, которое заключается в простом удалении пробелов в HTML:

http://jsfiddle.net/F3Mdd/1/ - это очень просто, и это просто работает. Из этого:

<div>a</div>
<div>a</div>

:

<div>a</div><div>a</div>

Здесь более подробный ответ .

Честно говоря, я всегда просто удаляю пробелы...

Ответ 3

Другим подходом является просто подождать эту функцию CSS3 и удалить до этого пробел Javascript.

http://jsfiddle.net/rT4Dy/2/

$('[data-bikeshedding="discard"]').each (function () {
  var node = $(this);
  node.html (node.find ('> *').detach ());
});