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

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

Paginator->numbers(array('class' => 'numbers', 'separator' => '', 'before' => '', 'after' => '', 'first' => 1, 'last' => 1)); ?>

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

 
12

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

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

 
12

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

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

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

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

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

, если вокруг них нет других символов.

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

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

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

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

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

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

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

), а затем верните font-size в правильный размер для элементов контента. например:

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

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

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

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

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

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

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