Не отображать пробелы в формате HTML на веб-странице

Question

У меня есть следующий код для генерации некоторых диапазонов с помощью помощника cakephp

<div id="numberRow">
    <?php echo $this->Paginator->numbers(array('class' => 'numbers', 'separator' => '', 'before' => '', 'after' => '', 'first' => 1, 'last' => 1)); ?>
</div>

Это генерирует следующий код:

<div id="numberRow">
    <span class="current">1</span><span><a href="/posts/show/barter/page:2" class="numbers">2</a></span>
</div>

Проблема в том, что браузер отображает пробел после <span>, который мне не нужен.

Мое решение пока состоит в том, чтобы написать торт следующим образом:

<div id="numberRow">
            <span class="current">1</span><span><a href="/posts/show/barter/page:2" class="numbers">2</a></span></div>

с закрывающим тегом в той же строке, что и <span>, но это разбивает формат и затрудняет чтение источника.

Есть ли лучший способ?

Answer 1

Хорошие новости!Существует стиль CSS, который нацелен на решение именно этой проблемы.Он называется white-space-collapse, и в вашей таблице стилей он выглядит следующим образом:

#numberRow {white-space-collapse: discard;}

В браузерах, которые его поддерживают, это приведет к удалению пробела между тегами в пределах <div>, если их нет.любые другие символы вокруг них.

Теперь о плохих новостях ... пока нет ни одного браузера, который бы его поддерживал.: (

Быстро движущиеся браузеры, вероятно, поддержат его очень скоро - я готов поспорить, что он появится в Chrome, по крайней мере, к концу года - но этого будет недостаточно.поддержка, которая стоит того, чтобы ее использовать в течение некоторого времени.

Между тем, это распространенная проблема, от которой страдают многие дизайнеры сайтов.

Самое распространенное решение - просто удалитьпробелы в вашем исходном коде, как в примере, который вы дали в вопросе. Это не идеально, но это решает проблему и без каких-либо грязных хаков.

Если вы полны решимости сохранить свой исходный кодTidy (или вы просто не можете избежать этого из-за используемой платформы или чего-то еще), есть еще несколько хакерских решений:

Во-первых, используйте замену строки Javascript, когда страница загружается вУдалите ненужные пробелы. Это грязно, но работает, за исключением редкого случая, когда пользователь отключил JavaScript. У вас могут возникнуть проблемы с обновлением страницы при первой загрузкес одним макетом, а затем сразу же повторно синхронизируется с правильным макетом, но, вероятно, он будет минимальным (в зависимости от скорости браузера и масштаба проблемы).

Еще более сложное решение, но, несомненно, умноеhack, это установить font-size:0; для родительского элемента (в вашем случае <div>), а затем установить font-size обратно на правильный размер для элементов содержимого.Например:

#numberRow {font-size:0;}
#numberRow>span {font-size:12px;}

(заменив '12px' на любой размер, который вам нужен, конечно)

Недостатки этого: во-первых, это ужасный хак;во-вторых, это ужасный хак;и, в-третьих, это может затруднить управление размером шрифта, если вы используете и размерный макет, а не шрифты с фиксированным размером в пикселях.Но это работает.

В общем, я рекомендую перейти к простому ответу и убрать пробелы в вашем PHP-коде.По крайней мере, до тех пор, пока в большинстве браузеров не появится правильное решение CSS.

Надеюсь, это поможет.

Answer 2

Не могли бы вы просто сделать это?

<div id="numberRow"><?php echo $this->Paginator->numbers(array('class' => 'numbers', 'separator' => '', 'before' => '', 'after' => '', 'first' => 1, 'last' => 1)); ?></div>