В хтмл пробел: Как сделать пробел с помощью HTML

Leave a Comment / Разное / By /

php — Отмена перенос строки в HTML, чтобы убрать лишний пробел

UPD 3. Стоящей на отдельной строке ; давать другой класс <span>;</span>, которому назначить margin-left: -10px;. Значение подобрать под размер шрифта.

.container {
  font-size: 40px;
}
.semicolon-alone {
  margin-left: -10px;
)
<div>
  <span>text</span><span>;</span>
  <br>
  <span>text</span>
  <span>;</span>
</div>

UPD 2. С учётом комментариев к ответу предлагаю ещё три варианта.

1) Узнать, как вставлять более серьёзные куски PHP, собирать строку без лишних пробелов и выводить её целиком. Не работал с Laravel. Нужно нечто в таком духе:

$tmp = "";
if (!empty($translationAddition->translation_addition)) {
 $tmp .= "<span>" . $translationAddition->translation_addition .  "</span>";
}
if (!empty($translationAddition->translation_comment)) {
 $tmp .= "<span>" . $translationAddition->translation_comment . "</span>";
}
if (!empty($translationAddition->translation_operand)) {
 $tmp .= "<span>" .  $translationAddition->translation_operand . "</span>';
}
$tmp .= "<span>;</span>";

2) Закрывать комментарии по условию. Будет много, очень много комментариев.

@if ('' != $wmeaning->multi_translation)
    <span>{{ $wmeaning->multi_translation }}</span><span>;</span>
@endif
@foreach ($bridge->translationAdditions as $translationAddition)
    @if (!empty($translationAddition->translation_addition))
        <span>{{ $translationAddition->translation_addition }}</span><!--
    @endif
    @if (!empty($translationAddition->translation_comment))
        @if (!empty($translationAddition->translation_addition))
            -->
        @endif
        <span>{{ $translationAddition->translation_comment }}</span><!--
    @endif
    @if (!empty($translationAddition->translation_operand))
        @if (!empty($translationAddition->translation_addition) || !empty($translationAddition->translation_comment))
            -->
        @endif
        <span>{{ $translationAddition->translation_operand }}</span><!--
    @endif
    --><span>;</span>
@endforeach

3) Обнулять размер шрифта только у содержимого цикла. Для этого заворачивать его в дополнительный спан.

.kill-the-space {
  font-size: 0;
}
.text,
.semicolon {
  font-size: 20px;
)
@foreach ($bridge->translationAdditions as $translationAddition)
    <span>
    @if (!empty($translationAddition->translation_addition))
        <span>{{ $translationAddition->translation_addition }}</span>
    @endif
    @if (!empty($translationAddition->translation_comment))
        <span>{{ $translationAddition->translation_comment }}</span>
    @endif
    @if (!empty($translationAddition->translation_operand))
        <span>{{ $translationAddition->translation_operand }}</span>
    @endif
    <span>;</span></span>
@endforeach

UPD. Предлагаю добавить в ваш код HTML-комментарии, чтобы спрятать просвет между спанами:

@if ('' != $wmeaning->multi_translation)
    <span>{{ $wmeaning->multi_translation }}</span><span>;</span>
@endif
@foreach ($bridge->translationAdditions as $translationAddition)
    @if (!empty($translationAddition->translation_addition))
        <span>{{ $translationAddition->translation_addition }}</span><!--
    @endif
    @if (!empty($translationAddition->translation_comment))
        <span>{{ $translationAddition->translation_comment }}</span><!--
    @endif
    @if (!empty($translationAddition->translation_operand))
        <span>{{ $translationAddition->translation_operand }}</span><!--
    @endif
    --><span>;</span>
@endforeach

Если программа такое не переварит, то клонировать точку с запятой:

@if ('' != $wmeaning->multi_translation)
    <span>{{ $wmeaning->multi_translation }}</span><span>;</span>
@endif
@foreach ($bridge->translationAdditions as $translationAddition)
    @if (!empty($translationAddition->translation_addition))
        <span>{{ $translationAddition->translation_addition }}</span><span>;</span>
    @endif
    @if (!empty($translationAddition->translation_comment))
        <span>{{ $translationAddition->translation_comment }}</span><span>;</span>
    @endif
    @if (!empty($translationAddition->translation_operand))
        <span>{{ $translationAddition->translation_operand }}</span><span>;</span>
    @endif
@endforeach

А вот так можно заткнуть дыру с помощью стилей:

. container {
  font-size: 0;
}
.text,
.semicolon {
  font-size: 20px;
)
<div>
  <span>text1</span><span>;</span>
  <br>
  <span>text2</span> <span>;</span>
  <br>
  <span>text3</span>
  <span>;</span>
</div>

Пробелы в HTML

Все, кто пытался создавать сайты на HTML сталкивались с такой проблемой. Почти все теги HTML вырезают лишние пробелы. И в этот раз я Вам приведу пример этой «вырезки», а также расскажу, как сделать так, чтобы пробелы не вырезались.

Давайте для начала напишем простой

HTML-код:

<p>Некий текст           Продолжение...</p>

Если Вы посмотрите на результат, то увидите, что все наши пробелы были вырезаны и остался только один. И так делает почти каждый тег.

Существуют три варианта отображения дополнительных пробелов в HTML. Первый способ — это использование тега <pre>:

<pre><p>Некий текст      Продолжение...</p></pre>

В результате, Вы увидите, что пробелы остались, а именно этого мы и добивались.

Но есть и другой способ, который я использую регулярно — сущность «&nbsp;«. Данная сущность просто заменяет символ пробела:

<p>Некий текст&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Продолжение...</p>

В результате, Вы также увидите целую череду пробелов. Для меня данный способ лучше тем, что не нужно использовать лишних тегов. Но это дело вкуса. Где нужен

дополнительный пробел в HTML, просто вставляете «&nbsp;» и радуетесь результату.

И, наконец, последний способ — это использование CSS. Для этого Вам достаточно добавить такой стиль:

p {
  white-space: pre;
}

Данный способ самый быстрый и простой, однако, я его не использую, так как в моей практике встречается мало случаев, в которых мне приходится добавлять много подряд идущих пробелов. А если они и случаются, то использую сущность «&nbsp;» несколько раз. Вдобавок, свойство white-space поддерживается не всеми браузерами (в частности, IE6 и IE7 не поддерживают), что уже ограничивает область действия данного способа.

В общем, резюмирую:

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

pre>.

2) Если у Вас где-нибудь встречается одиночный момент, где нужно несколько пробелов подряд, то используйте сущность «&nbsp«;

3) Если же у Вас вся страница соткана из кучи подряд идущих пробелов (хотя это бывает крайне редко), то используйте свойство white-space со значением pre.

Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

  • Создано 07.12.2010 10:41:18
  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov. ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Различные варианты, поясняемые примерами кода

TL;DR — HTML-пространство может использоваться для разделения текстовых, визуальных или других элементов страницы.

Содержание
  • 1. Неразрывный пробел в HTML
  • 2. Другие параметры HTML для пробела
  • 3. Альтернативы CSS для пробела HTML
  • 4. Пробел HTML: полезные советы
—

в HTML

Когда вы пишете текст, скажем, в Microsoft Word, вы можете легко добавить несколько пробелов в строке. HTML не позволяет этого. У него есть функция под названием коллапс пробелов : независимо от того, сколько пробелов вы наберете, браузер уменьшит их до одного пробела.

Итак, как добавить пробел в HTML? Самый простой вариант — это неразрывный космический объект

, и есть два способа добавить его:

Пример 

  
 

Вы можете включить его, чтобы добавить несворачиваемый пробел HTML между словами, изображениями или другими элементами страницы. Это также предотвратит нежелательный разрыв строки. Например, в приведенном ниже фрагменте кода вы можете увидеть, как добавить пробел в числах HTML в качестве разделителя тысяч, а также убедиться, что браузер не разбивает его:

Пример 

 В Пекине 9 000 000 велосипедов.

Попробуйте в прямом эфире Учитесь на Udacity

Старайтесь не использовать слишком много неразрывного пробела в HTML: без разрывов строк вашему браузеру может понадобиться горизонтальная полоса прокрутки . Это не помогает пользователю. Вы также не должны использовать его для создания отступов, выравнивания символов или иного управления их положением на странице. Вместо этого используйте таблицы стилей CSS.

Другие параметры HTML для Space

В некоторых случаях может потребоваться добавить пробел в HTML для разделения частей текста. Неразрывное пространство действительно не вариант в этом случае. Вы должны использовать либо тег
для разрыва строки, либо заключать абзацы в теги

, чтобы определить их как отдельные:

Пример 

 Тук-тук!

Кто здесь?

Шутка "тук-тук" содержит вопросы и ответы. Обычно он заканчивается шутливой изюминкой.


Шутник говорит "Тук-тук!", как будто стучится в дверь дома. Затем получатель должен ответить, спросив, кто там.

Попробуйте в прямом эфире Учитесь на Udacity

Еще один способ сохранить все пустое пространство HTML, которое вы набрали, — предварительно отформатировать текст, заключив его в теги

: 
 
  Пример  
 
 
                              __
                     /\ . -"/
                    / ; .' .'
                   : :/ .'
                    \ ;-.'
       .--""""--..__/ `.
     .' .' `о \
    / `;
   : \ :
 .-; -. `.__.-'
: ; \ , ;
'._: ; : (
    \/ .__ ; \ `-.
     ; "-,/_..--"`-..__)
     '""--.._:
<пред> 
 Попробуйте в прямом эфире Учитесь на Udacity
 Предварительное форматирование текста сохраняет все HTML-пробелы и пустые строки такими, какими вы их напечатали. Таким образом, это полезно, когда вам нужно передать некое  визуальное значение  . В приведенном выше примере вы видите изображение ASCII. Вы также можете использовать 
  для написания адресов, стихов и других текстов, следующих определенному формату. 
 
 По умолчанию браузеры отображают предварительно отформатированный текст шрифтом фиксированной ширины. Однако вы можете изменить это с помощью CSS. 
 
  Pros  
 
     
  •  Упрощенный дизайн (без ненужной информации) 
    •  
  •  Высококачественные курсы (даже бесплатные) 
    •  
  •  Разнообразие функций 
    •  
 
  Основные функции  
 
     
  •  Nanodegre 
  •  Платные сертификаты об окончании 
    •  
 
 ЭКСКЛЮЗИВ: СКИДКА 75% 
 
  Pros  
 
     
  •  Удобная навигация 
    •  
  •  Никаких технических проблем 
    •    
  •  Seems to care about its users 
    •    
  
   Main Features   
  
      
  •  Huge variety of courses 
    •    
  •  30-day refund policy 
    •    
  •  Free certificates of completion 
    •    
  
 AS LOW AS 12. 99$ 
  
   Pros   
  
     
  •  Отличный пользовательский интерфейс 
    •  
  •  Предлагает качественный контент 
    •  
  •  Очень прозрачные цены 
    •  
 
  Основные характеристики  
 
     
  •  Бесплатные сертификаты об окончании 
    •  
  •  Ориентирован на навыки работы с данными 
    •  
  •  Гибкий график обучения 
    •  
 
 75% СКИДКА 
  
 Альтернативы CSS для пустого пространства HTML  
  
 Способы добавления пробела в HTML, описанные выше, полезны, но вам не следует полагаться на   их для стилизации и изменения положения элементов. Вместо этого проверьте следующие свойства CSS: 
 
     
  •  margin добавляет пространство HTML вокруг элемента (за пределами границ). 
    • 
 Отступ 
  •  добавляет HTML-пространство вокруг содержимого элемента (внутри границ). 
    • 
 
  •  text-align выравнивает текст в соответствии с выбранным значением (по левому краю, по правому краю, по центру или по ширине).  
    • 
 
  •  text-indent добавляет пространство HTML перед первой текстовой строкой. 
    • 
 
 
 Использование таблицы стилей CSS намного удобнее, когда вам нужно, чтобы стиль был  согласованным  . Вам нужно только настроить одну строку, чтобы изменения повлияли на всю страницу, вместо того, чтобы просматривать каждый абзац. 
  
 Пробел HTML: полезные советы  
  
     
  •  В большинстве текстовых процессоров можно использовать ярлыки для добавления неразрывного пробела. Попробуйте  Option+Пробел  для MacOS,  Ctrl+Shift+Пробел  для MS Word или OpenOffice и  Ctrl+Alt+Пробел  для Windows (в качестве альтернативы вы можете удерживать  Alt  и нажать  0160  на цифровой клавиатуре) . 
    • 
 
  •  Вы также можете включить два или четыре пробела одновременно, набрав     или     . 
    • 
 
  •  Неразрывные пробелы также могут быть полезны в таблицах HTML.  Добавление единицы к пустой ячейке может предотвратить схлопывание таблицы   в браузерах, которые не поддерживают пустые ячейки. 
    • 
 
  •  Если вы решите использовать свойства CSS для добавления пустого пространства, избегайте определения значений в  абсолютных единицах  . Они не будут адаптироваться к изменениям шрифта или размера экрана, поэтому используйте проценты и единицы em для лучшего отклика. 
    • 
 
  
 тегов - Как оставить место в HTML 
  

                        спросил
                          
 

                        Изменено
                        2 года, 9несколько месяцев назад
 
 

                        Просмотрено
                        121 тысяч раз
 
 
 Я знаю, что HTML нечувствителен к пробелам. Но что я могу использовать, чтобы сделать пустые места между словами или фразами. Я пробовал  
  таких тегов, но HTML автоматически пропускает их.  
 
 Кто-нибудь может привести примеры кодов? 
 
     
  •  html 
    •  
  •  теги 
    •  
 





            2
     
 
 Вы можете использовать    , он же Неразрывный пробел. 
 

   
 По сути, это стандартный пробел, основное отличие которого состоит в том, что браузер не должен разрывать (или переносить) строку текста в том месте, где этот     занимает. 

 
 





            1
     
 
  
 
 Это даст вам место, которое вы ищете.
 Тег "pre" определяет предварительно отформатированный текст. Он сохраняет как пробелы, так и разрывы строк.
 
 
        <тело>
            
Этот абзац будет предварительно отформатирован.
Надеюсь, это поможет!
Все пробелы будут отображаться так, как в исходном файле.
            
 
 Как уже ответили другие,  $nbsp;  будет выводить пробел без разрыва. Вот документы w3 для     и других.
 Однако есть и другие способы сделать это, и сейчас я бы предпочел использовать таблицы стилей CSS. Также есть учебные пособия по w3c для начинающих.
 С помощью CSS это можно сделать так:
 
    <голова>
        Тест CSS
        <тип стиля="текст/CSS">
            р { межсловный интервал: 40px; }
        
    
    <тело>
        
Привет, мир! Достаточно места между словами, что вы об этом думаете?

    

 
 «Нечувствителен к пространству» — это упрощение. Более точное описание состоит в том, что последовательные пробельные символы (пробелы, табуляции, символы новой строки) эквивалентны одному пробелу в обычном содержании.
 Вы делаете пробелы между словами, используя символы пробела: «hello world». Если вам нужно больше места, вам следует подумать о том, что вы делаете, поскольку в обычном текстовом содержании это не имеет смысла. Для интервала  элементов  используйте свойства CSS  margin .
 Чтобы получить полезные примеры кодов, вам необходимо описать конкретную проблему, например разметку и описание желаемого рендеринга.
 Чтобы добавить  неразрывный пробел  или  реальный пробел  к вашему тексту в  html  , вы можете использовать    Объект из  символов.
 Использовать  пробел: pre  :
 

 Мои пространства 


 Мои пространства 
 
 3
 Либо используйте символ неразрывного пробела (да, вы можете скопировать/вставить его), объект HTML, либо, если вы имеете дело с большим предварительно отформатированным блоком, используйте  white-space  Свойство CSS.
 Если вам нужен отступ абзаца, вы можете использовать объявление text-indent в CSS.
 
  <голова> <стиль> р {текстовый отступ: 50px; }   <тело>
Этот абзац будет иметь отступ в 50 пикселей.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *