Тег h1 не вмещается и переносится на другую строку, что делать?

Question

[Frel]

Тег h1 не вмещается и переносится на другую строку, что делать?
Обычный код при ширине 1000px второе слово "elementum" переносится на другую, что делать и text-align: center; при оцентровке не помогает!!!

Answer 1

[sergey]

white-space: nowrap и делов-то,
при этом span - строчный элемент, и его размеры - это его содержимое, и соответственно выровнять вы ничего не можете при этом (размер = содержимое), поэтому нас выручает родитель

.wrap{
  text-align: center;
}
span {
  color: #ffffff;
  font-size: 64px;
  font-family: "Open Sans Light", Helvetice, sans-serif;
  white-space: nowrap;
}

если ответ подошел, не забываем отмечать решением:)

Comments

[Frel]

а центрировать как?

[Frel]

вместо text-align: center

[Frel]

margin auto не получается

[sergey]

Frel: написал в ответе

[Frel]

SM: А почему конкретно span text-align не срабатывает?

[sergey]

Sergey Goryachev: codepen.io/Martynyuk/pen/XNwBme

[Сергей Горячев]

SM: да я не о том) перепутал) всё хорошо у вас)))

[Сергей delphinpro]

SM: >потому что есть родитель
прямо так поэтому?

[sergey]

Сергей: ну конечно же нет, в ответе все очевидно

[Сергей delphinpro]

SM: Ну так и нужно отвечать )
Потому что span по-умолчанию строчный элемент, размеры строчного элемента определяются его содержимым. А раз размер элемента равен его содержимому, то выравнивание визуально видно не будет. Хотя оно есть и работает, внутри элемента. А вот что бы выровнять сам строчный элемент, выравнивание следует задавать его родителю.

[sergey]

Сергей: я думаю что это очевидно что span строчник:)) но вы правы

[sergey]

Frel: span - строчный элемент, и его размеры - это его содержимое, и соответственно выровнять вы ничего не можете при этом (размер = содержимое), но вот задав выравнивание родителю, вы получите желаемое

Answer 2

[Евгений Вольф]

Клац

Comments

[Frel]

Не понял, что вы сделали?

[sergey]

что это? это вы так отцентрировали?

[Евгений Вольф]

Frel: сделал так, что бы меню не вылазило за пределы красного прямоугольника... :)

[sergey]

Frel: я вам дал ответ, посмотрите, все работает

[Дмитрий]

Frel у вас меню вытесняет лишним паддингом текст. Сравните ваш класс .menu и его

[Frel]

Дмитрий: По макету нижний паддинг 44px и, что делать?

[Евгений Вольф]

Frel: посмотрите границы элемента, у которого "нижний паддинг 44px", если он должен вылазить за пределы родительского элемента - то придётся, либо у кого-то выставить position:absolute, либо ещё как-то извращаться, либо смириться с тем, как он влияет на остальные элементы. Ещё как вариант, можно убрать у него float, тогда он перестанет сдвигать другие элементы.

А вообще, это довольно странно, что в подобной ситуации, в макете так жестко задан нижний паддинг, к тому же, такой странный. При стандартном "box-sizing: content-box", элемент будет больше (выше), чем его родитель... Где-то поломалась логика.

[Frel]

Евгений Вольф: Я уменьшил padding на 10px