Работа с пробелами HTML

Мне было интересно, есть ли какой-нибудь метод, который можно использовать для удаления пробелов, отображаемых в браузере, без ущерба для читабельности HTML.

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

Например, посмотрите эти скрипки.

Fiddle 1 имеет читаемый HTML, но изображения помещаются во вторую строку из-за нежелательные пробелы.

Fiddle 2 содержит HTML-код в одной строке, что затрудняет чтение, но вывод правильный.

Мне интересно, есть ли способ обойти это или это просто то, с чем мне нужно иметь дело?

Мне непросто работать со следующим кодом.

<div class="prodGrid">
    <div class="prod"><img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" /></div><div class="prod"><img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" /></div><div class="prod"><img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" /></div></div>

html css whitespace removing-whitespace
person Francesca    schedule 15.04.2013    source источник
comment
вы можете использовать notepad ++ с его расширениями для форматирования кода.   -  person zkanoca    schedule 15.04.2013

Ответы (2)


arrow_upward
2
arrow_downward

Для этого есть несколько решений только для CSS, но ничего из того, что я бы рекомендовал. Я предпочитаю хранить разметку в отдельных строках, но использую комментарии для «удаления» пробелов, вот так :

<div class="prodGrid">
    <div class="prod">
        <img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" />  
    </div><!--
    --><div class="prod">
        <img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" />  
    </div><!--
    --><div class="prod">
        <img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" />  
    </div>
</div>

Уродлив, черт возьми, но в настоящее время я предпочитаю метод, пока не будет правильного Решение CSS. inline-block имеет слишком много полезных свойств, чтобы отказаться от него только потому, что разметка немного страдает.

Примечание. Если вы выберете такой подход, обратите внимание на IE7. Есть ошибка в этом браузере, что означает, что комментарии интерпретируются как элементы DOM. Итак, если вы используете несколько более сложные селекторы, вам может потребоваться просто поместить все в одну строку.

person CherryFlavourPez    schedule 15.04.2013
comment
Спасибо, это хорошо работает. Странная причуда, интересно, изменится ли она в будущем. - person Francesca; 15.04.2013
comment
Это вряд ли изменится (поведение правильное в соответствии со спецификацией и имеет определенный смысл). Но будет новое свойство text-space-collapse, которое позволит нам легко с этим справиться. - person CherryFlavourPez; 15.04.2013

arrow_upward
0
arrow_downward

Используется для vertical-align top на вашем img tag

вот так

.prod img{vertical-align:top;}

Демо

----------------

2-е это

.prodGrid{font-size:0;}
.prod img{vertical-align:top;}

Demo2

person Rohit Azad Malik    schedule 15.04.2013
comment
В вашей первой демонстрации все еще есть все в одной строке, так что это не совсем решение. Установка font-size на 0 действительно решает проблему, но затем вам нужно снова установить его для дочерних элементов (в будущем может потребоваться текст). - person CherryFlavourPez; 15.04.2013
comment
используется для этого .prodGrid {font-size: 0;} и .prodGrid * {font-size: 12px;} - person Rohit Azad Malik; 15.04.2013
comment
Ага - работает надежно, просто не люблю лично пользоваться. В более крупных проектах (и в случаях, когда вы используете em для изменения размера шрифта) это просто добавляет еще один уровень сложности. Но любое решение этой проблемы - это своего рода взлом. - person CherryFlavourPez; 15.04.2013
comment
Проблема в том, что когда вы хотите добавить текст ... эти div также должны содержать текст внизу, поэтому установите font-size: 0; тогда вам нужно будет установить размер шрифта для любых промежутков / p, что немного сложнее IMO - person Francesca; 15.04.2013