Не размещайте html-форматирование пробелов на веб-странице.

У меня есть следующий код для генерации некоторых интервалов с помощью хелпера 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>, но это разрывает формат и затрудняет чтение источника.

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

Ответ 1

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

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

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

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

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

В то же время, это общая проблема, которая вызывает множество дизайнеров сайтов.

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

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

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

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

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

(заменяя "12px" на любой размер, который вам захочется, конечно)

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

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

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

Ответ 1

Ответ 2