Почему текст переносится?

Question

[Роман Тузов]

Почему текст переносится на 2 строку? Ему ведь хватает ещё места

Comments

[IninsaY]

Как вы хотите получить решение? Ни кода, ничего

[Роман Тузов]

IninsaY, а здесь сильно нужен код? Вроде и так видно, что места в достатке

[Роман Тузов]

IninsaY,

<section class="single">
		<div class="single__text-main">
			<h1>Бизнес-игра «Делис»</h1>
		</div>
          </section>

.single {
	position: relative;
	padding: 0 8px;
}
.single__text-main h1 {
	position: absolute;
	top: -35px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	padding: 15px 120px;
	border: 4px solid #008DDD;
	background: #fff;
	color: #ED760E;
	font-weight: bold;
	border-radius: 160px;
}

[IninsaY]

Hutson, я думаю, что проблема в padding

[IninsaY]

Hutson, у вас как-раз и не хватает места, просто чтобы влез текст - да, но с внутренними отступами не хватает

[Роман Тузов]

IninsaY, так а хватает же ещё места по бокам, по 120 точно будет

Answer 1

[Karpion]

А как Вы определили, что места там достаточно? Мне кажется - как раз впритык, а надо ещё на пробелы.

Comments

[Роман Тузов]

По бокам же есть место, никаких отступов от краёв нет. По бокам хватает места на 120px

[Aetae]

Hutson, учи css, братюня. padding - это не "свободное место", padding - это конкретный отступ, текст не может залезать на padding.
Тебе нужно убрать padding и проставить text-align: center;

[Роман Тузов]

Aetae, если уберу padding, то голубая рамка будет впритык к тексту

[Aetae]

Hutson, проставь width...

[Роман Тузов]

Aetae, ну другого выбора я тоже не вижу

[Роман Тузов]

Aetae, Я просто хотел, чтобы размер менялся в зависимости от текст. Если его много, то отступы соответствуют, если маленький текст, то и по бокам не будет много свободного места

[Aetae]

Hutson, тогда min-width и небольшой padding.

Answer 2

[Pavel Pavel]

white-space: nowrap

Answer 3

[Андрей]

Сделайте padding по бокам чуть меньше, а лучше задайте text-align: center;