CSS - Оборачивайте текст в div только тогда, когда это абсолютно необходимо - PullRequest
Новая
       49

CSS - Оборачивайте текст в div только тогда, когда это абсолютно необходимо

0 голосов
/ 31 мая 2019

У меня есть флажок с текстом рядом с ним в небольшом всплывающем окне:

HTML: 

<div class="box">
  <div class="checkbox-wrapper">
    <input type="checkbox" class="checkbox" />
    <p class="checkbox-label">Filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
  </div>
</div>

CSS: 

.box {
  width: 80%;
  height: 100px;
  background-color: #d1d1d1;
  margin-left: 50%;
  transform: translate(-50%, 0);
}

.checkbox-wrapper {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  margin-left: 50%;
  transform: translate(-50%, 0);
}

.checkbox {
  display: inline-block;
}

.checkbox-label {
  display: inline-block;
  color: #2e2e2e;
  font-size: 15px;
  margin: auto;
  margin-left: 10px;
}

JSFiddle

Проблема в том, что, поскольку у меня .checkbox-wrapper равно white-space: nowrap;, оно выходит из всплывающего меню. Однако, если я удаляю white-space: nowrap;, текст переносится слишком рано и не занимает все пространство во всплывающем окне. Как я могу сделать так, чтобы текст переносился только после того, как он достигнет 100% ширины всплывающего окна?

1 Ответ

1 голос
/ 31 мая 2019

вы можете использовать flexbox здесь, я прикрепил фрагмент jsfiddle здесь. 

.box {
		width: 80%;
		height: 100px;
		background-color: #d1d1d1;
		margin-left: 50%;
		transform: translate(-50%, 0);
	}

	.checkbox-wrapper {
		display: flex;
		max-width: 100%;
		flex-wrap: nowrap;
	}

	.checkbox-label {
		color: #2e2e2e;
		font-size: 15px;
		margin-left: 10px;
    margin-top: 0;
	}
<div class="box">
	<div class="checkbox-wrapper">
		<input type="checkbox" class="checkbox" />
		<p class="checkbox-label">Filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
	</div>
</div>
...