Изменить высоту <br> с помощью CSS

Я видел здесь question примерно то же самое, но 9X_html5 я не могу заставить работать ни один из 9X_css-classes ответов (по крайней мере, в Chrome).

Этот 9X_inline-block вопрос предназначен только для
, я знаю 9X_span множество других методов изменения высоты, но 9X_max-width в этом случае я не могу изменить HTML.

bla

bla
bla

bla

CSS:

br {
  display: block;
  margin-bottom: 2px;
  font-size:2px;
  line-height: 2px;
}

Желаемый эффект: меньшая 9X_inline-block межстрочная высота.

Единственное, что я могу 9X_css-classes заставить работать, - это display:none, но тогда все 9X_box-shadow разрывы строк удаляются.

Вот fiddle for it, использующий 9X_html-tag некоторые из техник, но обратите внимание, что 9X_div он отображается точно так же, как и без 9X_css-layout CSS.

92
0
10
Общее количество ответов: 10

Ответ #1

Ответ на вопрос: Изменить высоту <br> с помощью CSS

Это кажется очень хакерским, но в chrome 9X_html 41 на ubuntu я могу сделать
слегка стилизованным:

br {
  content: "";
  margin: 2em;
  display: block;
  font-size: 24%;
}

Я 9X_css3 контролирую интервал размером шрифта.


Обновить

Я сделал 9X_span несколько тестовых примеров, чтобы увидеть, как 9X_min-height меняется ответ при обновлении браузеров.

*{outline: 1px solid hotpink;}
div {
  display: inline-block;
  width: 10rem;
  margin-top: 0;
  vertical-align: top;
}

h2 {
  display: block;
  height: 3rem;
  margin-top:0;
}

.old br {
  content: "";
  margin: 2em;
  display: block;
  font-size: 24%;
  outline: red;
}

.just-font br {
  content: "";
  display: block;
  font-size: 200%;
}
.just-margin br {
  content: "";
  display: block;
  margin: 2em;
}

.brbr br {
  content: "";
  display: block;
  font-size: 100%;
  height: 1em;
  outline: red;
  display: block;
}

Raw brrrrrs

bla

bla
bla

bla

margin & font size

bla

bla
bla

bla

only font size

bla

bla
bla

bla

only margin

bla

bla
bla

bla

brothers vs only brs

bla

bla
bla

bla

У 9X_html-tag всех есть своя версия странного поведения. За 9X_css исключением браузера по умолчанию, только 9X_min-height последний учитывает разницу между одним 9X_max-height и двумя brs.

94
2

  • В 2017 году у меня сработало: `conten ...

Ответ #2

Ответ на вопрос: Изменить высоту <br> с помощью CSS

Вы не можете изменить высоту самого тега 9X_div br, поскольку это не тот элемент, который 9X_span занимает место на странице. Это просто инструкция 9X_css-layout по созданию новой строки.

Вы можете изменить 9X_html-head высоту строки, используя стиль line-height. Это изменит 9X_divs расстояние между текстовыми блоками, которые 9X_webpage вы разделены пустыми строками, но, естественно, также 9X_span и расстояние между строками в текстовом 9X_divs блоке.

Для полноты: текстовые блоки в HTML 9X_min-height обычно создаются с помощью тега p вокруг 9X_html5 текстовых блоков. Таким образом, вы можете 9X_inline-block контролировать высоту строки внутри тега 9X_span p, а также расстояние между тегами p.

82
1

  • Также элемент должен иметь `display: block`, иначе` ...

Ответ #3

Ответ на вопрос: Изменить высоту <br> с помощью CSS

Взгляните на line-height property. Попытка стилизовать тег
- не 9X_min-height ответ.

Пример:

This
text
is
single-spaced.

This
text
is
double-spaced.

21
1

  • В качестве примечания: проблема с высотой строки в том, что она влияет как на «<br />», так и на пробел между строками непрерывного текста. Возможность н ...

Ответ #4

Ответ на вопрос: Изменить высоту <br> с помощью CSS

Высота строки тега br может отличаться от 9X_css-layout высоты строки остального текста внутри текста 9X_div абзаца путем установки font-size для тега 9X_css-classes br.

Пример: br { font-size: 200%; }

8
0

Ответ #5

Ответ на вопрос: Изменить высоту <br> с помощью CSS

Вы можете управлять высотой
, если поместите 9X_css-layout ее в div с ограниченной высотой. Попробуйте:


6
3

  • Обратите внимание, что при использовании этого подхода вам * больше не нужен «<br />` *. Он отображает то же самое, как с ним, так и без него, потому что <div> - это элемент уровня блока, который уже выз ...

Ответ #6

Ответ на вопрос: Изменить высоту <br> с помощью CSS

Используйте свойство content и стиль этого content. Затем 9X_divs поведение контента корректируется с помощью 9X_max-height псевдоэлементов. Псевдоэлементы :: before и :: after работают 9X_html-head в Mac Safari 10.0.3.

Здесь содержимое элемента 9X_html-tag br используется в качестве привязки элемента 9X_css3 для содержимого элемента br :: after. В элементе br можно 9X_div задать стиль интервала br. br :: after - это место, где 9X_div можно отображать и стилизовать содержимое 9X_div-layouts br :: after. Выглядит красиво, но не на 9X_css 2 пикселя
.

br { content: ""; display: block; margin: 1rem 0; }
br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; }

Свойство элемента br line-height 9X_span игнорируется. Если к одному или обоим селекторам 9X_max-height применяются отрицательные значения для вертикального 9X_css-classes «подъема» тегов br при отображении, то выполняется 9X_webpage правильный интервал по вертикали, но при 9X_div-layouts отображении происходит постепенное смещение 9X_div-layouts отступов содержимого отображения после каждого 9X_html-head br тег. Отступ в точности равен величине подъема, отличной 9X_min-height от фактической типографской высоты строки. Если 9X_css вы угадываете правильный подъем, то здесь 9X_html нет отступа, а есть одна линия скопления, точно 9X_html-tag равная исходной высоте глифа, зажатая между 9X_inline-block предыдущей и следующей строками.

Кроме того, завершающий 9X_inline-block тег br приведет к тому, что следующий тег 9X_span отображения html унаследует стиль содержимого 9X_webpage br: after. Кроме того, псевдоэлементы заставляют 9X_inline-block

интерпретироваться как один
. В то время 9X_div-layouts как псевдокласс br: active заставляет каждый
интерпретироваться 9X_css-classes отдельно. Наконец, использование br: active 9X_div-layouts игнорирует псевдоэлемент br: after и все стили br: active. Итак, все, что 9X_css-layout требуется, это следующее:

br:active { }

что не помогает 9X_webpage при создании дисплея высотой 2 пикселя
. И 9X_css-layout здесь псевдокласс: active игнорируется!

br:active { content: ""; display: block; margin: 1.25em 0; }
br { content: ""; display: block; margin: 1rem; }
br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; }

Это 9X_html только частичное решение. Псевдокласс и псевдоэлемент 9X_max-width могут предоставить решение, если его настроить. Это 9X_css может быть частью решения CSS. (У меня только 9X_min-height Safari, попробуйте в других браузерах.)

Learn web development: pseudo classes and pseudo elements

Pay attention to global elements - BR at Mozilla.org

6
0

Ответ #7

Ответ на вопрос: Изменить высоту <br> с помощью CSS

Так как «поле» не работает в Chrome, поэтому 9X_divs я использовал вместо него «границу».

br {
  display: block;
  content: "";
  border-bottom: 10px solid transparent; // Works in Chrome/Safari
}
@-moz-document url-prefix() {
  br {
    margin-bottom: 10px; // As 'border-bottom' doesn't work in firefox and 'margin-bottom' doesn't work in Chrome/Safari.
  }
}

3
0

Ответ #8

Ответ на вопрос: Изменить высоту <br> с помощью CSS

BR - это что угодно, только не «особенный»: это 9X_box-shadow все еще действительный тег XML, которому 9X_css вы можете присвоить атрибуты. Например, вам 9X_inline-block не нужно заключать его в диапазон, чтобы 9X_css изменить высоту строки, скорее вы можете 9X_divs применить высоту строки непосредственно 9X_span к элементу.

Вы можете сделать это с помощью 9X_divs встроенного CSS:

This is a small line

break. Whereas, this is a BIG line

break!

Обратите внимание, как 9X_html использовались два переноса строки вместо 9X_css-layout одного. Это связано с тем, как работают 9X_max-width встроенные элементы CSS. К сожалению, самая 9X_max-height потрясающая возможная функция css (lh unit) все 9X_max-height еще отсутствует с какой-либо совместимостью 9X_max-height с браузерами по состоянию на 2019 год. Таким 9X_inline-block образом, я должен использовать JavaScript 9X_css-classes для демонстрации ниже.

This is a small line

break. Whereas, this is a BIG line

break!

Вы даже можете использовать 9X_html любые селекторы CSS, такие как идентификаторы 9X_box-shadow и классы.

addEventListener("load", function(document, getComputedStyle){"use strict";
  var allShowLineHeights = document.getElementsByClassName("show-lh");
  for (var i=0; i < allShowLineHeights.length; i=i+1|0) {
    allShowLineHeights[i].textContent = getComputedStyle(
      allShowLineHeights[i]
    ).lineHeight;
  }
}.bind(null, document, getComputedStyle), {once: 1, passive: 1});
.show-lh {padding: 0 .25em}
.r {background: #f77}
.g {background: #7f5}
.b {background: #7cf}
This is a small line

break. Whereas, this is a BIG line

break!

Дополнительную информацию о высоте 9X_inline-block строки можно найти на the W3C docs.

По сути, теги BR 9X_max-height не являются чем-то пустым в мире стилей 9X_span CSS: они все еще могут быть стилизованы. Однако 9X_html-head я бы рекомендовал использовать только line-height для 9X_css-classes стилизации тегов BR. Они никогда не предназначались 9X_span для чего-то большего, чем перевод строки, и 9X_webpage поэтому они не всегда могут работать должным 9X_divs образом при использовании их в качестве 9X_html5 чего-то еще. Посмотрите, как даже после 9X_webpage применения множества визуальных эффектов 9X_box-shadow разрыв строки все еще не виден:

addEventListener("load", function(document, getComputedStyle){"use strict";
  var allShowLineHeights = document.getElementsByClassName("show-lh");
  for (var i=0; i < allShowLineHeights.length; i=i+1|0) {
    allShowLineHeights[i].textContent = getComputedStyle(
      allShowLineHeights[i]
    ).lineHeight;
  }
}.bind(null, document, getComputedStyle), {once: 1, passive: 1});
.show-lh {padding: 0 .25em}
.r {background: #f77}
.g {background: #7f5}
.b {background: #7cf}
This is a small line

break. Whereas, this is a BIG line

break!

Для таких 9X_max-height вещей, как поля и отступы, можно вместо 9X_span этого оформить диапазон с помощью br в таком 9X_span стиле.

#biglinebreakid {
  line-height: 450%;
  // 9x the normal height of a line break!
}
.biglinebreakclass {
  line-height: 1em;
  // you could even use calc!
}
This is a small line

break. Whereas, this is a BIG line

break! You can use any CSS selectors you want for things like this line

break!

Обратите внимание, что оранжевая капля 9X_box-shadow выше - это диапазон, содержащий br.

2
0

Ответ #9

Ответ на вопрос: Изменить высоту <br> с помощью CSS

#biglinebreakid {
  line-height: 450%;
  // 9x the normal height of a line break!
}
.biglinebreakclass {
  line-height: 1em;
  // you could even use calc!
}
This is a small line

break. Whereas, this is a BIG line

break! You can use any CSS selectors you want for things like this line

break!

9X_html-tag

1
0

Ответ #10

Ответ на вопрос: Изменить высоту <br> с помощью CSS

Вы можете написать тег br как показано


Измените 9X_max-height значение отступа на 10px на все, что вам нравится.

Примечание. При 9X_div-layouts указании заполнения высота увеличивается 9X_divs в обоих направлениях (сверху и снизу)

1
0