Широкий пробел html: html — Как сделать длинный пробел?

Phpstorm как в файле изменить отступы?

Задать вопрос

Вопрос задан

Изменён 3 года назад

Просмотрен 15k раз

Смотрите, есть настройки для каждого типа файлов, допустим, html. Я указал там отступы табуляции 2, чтоб поуже было.

Но в некоторых файлах остались отступы 4. Т.е. очень широкий код получается, а я люблю пользоваться автоформатированием.

Вот и как в этих файлах принудительно изменить отступы? на 2. Настройки уже изменены. Но на некоторые файлы не влияет.

  • phpstorm

Вам нужно переформатировать код Code|Reformat Code. Более детально в официальной документации

2

  1. Ctrl+Alt+S (File→Settings)
  2. Editor→Code Style→HTML (название вашего языка)
  3. Необходимо изменить Tab size, Ident, Continuation ident — я ставлю все 2.
  4. Если пользуетесь пробелами, а не табами необходимо снять галочку Use tab character (я снял).
  5. В окне редактирования файла нажать Ctrl+Alt+L (Code→Reformat Code)
  1. Если всё равно после Ctrl+Alt+L (Code→Reformat Code) ставит пробелы, попробуйте снять галочку с Enable EditorConfig support (File→Settings→Editor→Code Style)

Снять галку Editor->Code Style->Enable EditorConfig support или отредактировать .editorconfig в корне проекта. https://www.jetbrains.com/help/phpstorm/configuring-code-style.html#

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Специальные символы HTML

 

изображение символ
код
описание
      неразрывный пробел
    узкий пробел (еn-шириной в букву n)
    широкий пробел (em-шириной в букву m)
– – узкое тире (en-тире)
— — широкое тире (em -тире)
­ ­
­
мягкий перенос
 
© © © копирайт
® ® ® Знак (R) — зарегистрировано
º º º копье Марса
ª ª ª зеркало Венеры
‰ ‰ промилле
π π π пи
¦ ¦   Вертикальная черта
§ § § Знак параграфа
° °   Знак градуса
µ µ µ Знак «микро»
¶ ¶ Знак абзаца
· ·   Точка-маркер
°   ° градус
  … многоточие
  ‾ надчеркивание
´   ´ знак ударения
¦   ¦ вертикальный пунктир
знаки арифметичеких и математических операций
× ×   Крестик
×   × Знак умножения
÷ ÷ ÷ Знак деления
< &lt; &#60; меньше, чем
> &gt; &#62; больше, чем
± &plusm; &#177; Знак «плюс минус»
¹ &sup1; &#185; Степень 1
² &sup2; &#178; Степень 2
³ &sup3; &#179; Степень 3
¬ &not;
 
Знак отрицания
¼ &frac14; &#188; Одна четвертая
½ &frac12; &#189; Одна вторая
¾ &frac34; &#190; Три четверти
  &#8260; дробная черта
  &#8722; знак минус
  &#8804; меньше или равно
 
&#8805;
больше или равно
  &#8776; приблизительно равно (асимптотически равно)
  &#8800; не равно
  &#8801; совпадает с
  &#8730; квадратный корень (радикал)
  &#8734; знак бесконечность
  &#8721; знак суммирования
  &#8719; знак произведения
  &#8706; частичный дифференциал
  &#8747; интеграл
знаки валют
&euro; &#8364; Евро
¢ &cent; &#162; Цент
£ &pound; &#163; Фунт
¤ &current; &#164; Знак валюты
¥ &yen; &#165; Знак йены и юаня
ƒ   &#402; Знак флорина
маркеры
  &#8226; простой маркер
·   &#183; средняя точка
  &#8224; крестик
  &#8225; двойной крестик
  &#9824; пики
  &#9827; трефы
  &#9829; червы
  &#9830; бубны
  &#9674; ромб
кавычки
« &quot; &#34; двойная кавычка
& &amp; &#38; амперсанд
« &laquo; &#171; Левая типографская кавычка(кавычка-елочка)
» &raquo; &#187; Правая типографская кавычка(кавычка-елочка)
  &#8242; штрих (минуты, футы)
  &#8243; двоиной штрих (секунды, дюймы)
  &#8220; кавычка-лапка левая
  &#8221; кавычка-лапка правая верхняя
  &#8222; кавычка-лапка правая нижняя
  &#8249; одинарная угловая кавычка открывающая
  &#8250; одинарная угловая кавычка закрывающая
  &#8216; левая верхняя одинарная кавычка
  &#8217; правая верхняя одинарная кавычка
  &#8218; правая нижняя одинарная кавычка
стрелки
  &#8592; стрелка влево
  &#8593; стрелка вверх
  &#8594; стрелка вправо
  &#8595; стрелка вниз
  &#8596; стрелка влево и вправо

Похожие посты :

Как удалить вертикальный скролл бар в IE

Создание пользовательских маркеров-изображений в списках

Перенаправление (редирект) на PHP и не только

Реализация слайд-шоу при помощи плагина JQuery cycle

Использование небезопасных шрифтов. ..



У данной записи пока нет ниодного комментария

html — удаление пробелов над и под большим текстом в элементе встроенного блока

спросил

Изменено 3 месяца назад

Просмотрено 175 тысяч раз

Скажем, у меня есть один элемент span , определенный как встроенный блок. Это только содержимое — обычный текст. Когда размер шрифта очень большой, вы можете ясно видеть, как браузер добавляет небольшой отступ выше и ниже текста.

HTML:

CSS:

 интервал {
  отображение: встроенный блок;
  размер шрифта: 50px;
  цвет фона: зеленый;
}

​ 
 БОЛЬШОЙ ТЕКСТ 

Глядя на блочную модель, становится ясно, что браузер добавляет отступ внутри края содержимого . Мне нужно удалить это «отступ», один из способов — просто изменить высоту строки, например:

http://jsfiddle.net/7vNpJ/1/

Это отлично работает в Chrome, но в Firefox текст смещается вверх (FF17, Chrome 23, Mac OSX).

Есть идеи кроссбраузерного решения? Спасибо!

  • HTML
  • CSS
  • кроссбраузерный
5

Похоже, вам нужно явно установить шрифт и изменить высоту строки и высоту по мере необходимости. Предполагая, что «Times New Roman» является шрифтом по умолчанию в вашем браузере:

 span {
  отображение: встроенный блок;
  размер шрифта: 50px;
  цвет фона: зеленый;
  /*новый:*/
  семейство шрифтов: «Times New Roman»;
  высота строки: 34px;
  высота: 35 пикселей;
} 
 <диапазон>
    БОЛЬШОЙ ТЕКСТ
 
7

Браузер не добавляет отступы. Вместо этого буквы (даже заглавные) обычно значительно меньше по вертикали, чем высота шрифта, не говоря уже о высоте строки, которая обычно по умолчанию примерно в 1,2 раза превышает высоту шрифта (размер шрифта).

Для этого нет общего решения, потому что шрифты разные. Даже для фиксированного размера шрифта высота буквы зависит от шрифта. И заглавные буквы не обязательно должны иметь одинаковую высоту в шрифте.

Практические решения можно найти экспериментально, но они неизбежно зависят от шрифта. Вам нужно будет установить высоту строки существенно меньше, чем размер шрифта. Следующее, кажется, дает желаемый результат в разных браузерах в Windows для шрифта Arial:

 span.foo
{
  отображение: встроенный блок;
  размер шрифта: 50px;
  цвет фона: зеленый;
  высота строки: 0,75 em;
  семейство шрифтов: Arial;
}

диапазон.бар
{
  положение: родственник;
  внизу: -0,02см;
} 
 БОЛЬШОЙ ТЕКСТ 

Вложенные элементы span используются для смещения текста по вертикали. В противном случае текст находится на базовой линии, а под базовой линией есть место для выносных элементов (как в буквах j и y).

Если вы внимательно посмотрите (с увеличением), то заметите, что здесь очень мало места над и под большинством букв. Я настроил все так, чтобы буква «G» поместилась. Она простирается по вертикали немного дальше, чем другие прописные буквы, потому что таким образом буквы внешне похожи на по высоте. Аналогичные проблемы возникают и с другими буквами, такими как «О». И вам нужно настроить параметры, если вам понадобится буква «Q», поскольку у нее есть выносной элемент, который простирается немного ниже базовой линии (в Arial). И, конечно же, если вам когда-нибудь понадобится «É» или почти любой диакритический знак, у вас будут проблемы.

Я дизайнер, и у наших разработчиков изначально была эта проблема при работе с Android, и у наших веб-разработчиков такая же проблема. Мы обнаружили, что интервал между строкой текста и другим объектом (либо компонентом, например кнопкой, либо отдельной строкой текста), который выдает программа дизайна, неверен. Это связано с тем, что программа проектирования не учитывает диакритические знаки при определении «размера» отдельной строки текста.

В итоге мы добавили Êg к каждой строке текста и вручную создали разделители (маленькие синие прямоугольники), которые действуют как «размер» от фактического верхнего края текста (т. E) или от спускового устройства (нижняя часть буквы «g»). Например, у вас есть очень скучная верхняя панель навигации, состоящая из прямоугольника и заголовка под ним. Программа дизайна скажет, что расстояние между нижней частью верхней навигации и верхней частью текстового поля заголовка составляет 24 пикселя. Однако, когда вы измеряете от нижней части навигации до верхней части акцентного знака Ê, интервал фактически составляет 20 пикселей.

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

3

 диапазон::до,
диапазон :: после {
    содержание: '';
    дисплей: блок;
    высота: 0;
    ширина: 0;
}
диапазон:: до {
    верхняя граница:-6px;
}
диапазон:: после {
    нижняя граница:-8px;
}
 

С помощью этого инструмента выясните отрицательные поля margin-top и margin-bottom: http://text-crop. eightshapes.com/

Инструмент также дает вам примеры SCSS, LESS и Stylus. Вы можете прочитать больше об этом здесь: https://medium.com/eightshapes-llc/cropping-away-negative-impacts-of-line-height-84d744e016ce

1

У меня была аналогичная проблема. По мере увеличения высоты строки пространство над текстом увеличивается. Это не заполнение, но это повлияет на вертикальное пространство между содержимым. Я обнаружил, что добавление отрицательного верхнего поля помогло. Это должно было быть сделано для всех различных экземпляров высоты строки, и это также зависит от семейства шрифтов. Может быть, это то, о чем дизайнеры должны больше знать при передаче требований к дизайну (?) Итак, для конкретного экземпляра семейства шрифтов и высоты строки:

 ч2 {
    семейство шрифтов: «Garamond Premier Pro Regular»;
    размер шрифта: 24px;
    цвет: #001230;
    высота строки: 29px;
    верхнее поле: -5px; /* ПОПРАВКА НА ВЫСОТУ СТРОКИ */
}
 
2

Это сработало для меня:

 высота строки: 80%;
 

Если его текст должен масштабироваться пропорционально ширине экрана, вы также можете использовать шрифт как svg , вы можете просто экспортировать его из чего-то вроде иллюстратора. Мне пришлось сделать это в моем случае, потому что я хотел выровнять верхнюю часть левой и правой границы с верхним |ТЕКСТ| шрифта | . Используя высоту строки, текст будет прыгать вверх и вниз при масштабировании окна.

Лучше всего использовать display:

 inline-block;
 

и

 переполнение: скрыто;
 

Меня часто раздражала эта проблема. Вертикальное выравнивание будет работать только снизу и по центру, но не сверху! 🙁

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

CSS:

 p {
    семейство шрифтов: "Times New Roman", Times, serif;
    размер шрифта: 15px;
    фон: #FFFFFF;
    маржа: 0
    поле сверху: 3px;
    нижняя граница: 10px;
}
 

Для меня настройки полей уладили все независимо от того, где я разместил свой код «p>…/p>».

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

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

Как добавить табуляцию вместо нескольких неразрывных пробелов («nbsp»)?

Мэтью К.

Проблема

Вы хотите добавить символ табуляции в HTML вместо использования нескольких объектов HTML с неразрывным пробелом (   ). Как вы можете это сделать?

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

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

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

Решение

Мы рассмотрим три способа добавления табуляции вместо использования нескольких неразрывных пробелов:

  • Использование других объектов HTML.
  • Использование тега
     .
  • Использование класса CSS.

Использование других объектов HTML

Вы можете добавить пространство табуляции, используя другие пробельные символы объектов HTML, которые шире, чем   HTML-объект. Объект HTML имеет ширину около двух пробелов и Объект HTML имеет ширину около четырех пробелов. Ширина этих объектов зависит от текущего шрифта.

Использование тега

 

Предпочтительным способом добавления табуляции является использование тега

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

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

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