Запретить ширину родительского элемента flexbox дочерней после переноса строки - PullRequest
Новая
       10

Запретить ширину родительского элемента flexbox дочерней после переноса строки

0 голосов
/ 15 мая 2018

У меня есть пролет и якорь в гибком контейнере, которые центрированы по горизонтали и вертикали. Якорный текст содержит несколько не тормозящих пробелов, которые необходимы - на среде я хочу, чтобы он отображался как однострочный, на маленьком - двухстрочный, где текст второй строки определяется как nbsps. Моя проблема в том, что, когда дело доходит до разрыва текста привязки на маленьком, горизонтальное центрирование не работает, потому что привязка занимает всю ширину родительского элемента, поэтому и метка, и привязка остаются с левой стороны родителя.

Есть ли способ предотвратить ширину родительского якоря, заполненного несколькими строками?

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

Среда отлично работает ... Средний - отлично

Как это работает на малом и чего я не хочу маленький - не хочу

Что я хочу на маленьком маленький - хочу 

.parent {
  border: 1px solid blue;
  padding: 10px;
  display: flex;
  justify-content:center;
  align-items: center;
}
.parent span {
  margin-right: 5px;
}
<div class="parent">
  <span>Label:</span>
  <a href="#">One liner on medium, or&nbsp;two&nbsp;liner&nbsp;on&nbsp;small.</a>
</div>

1 Ответ

0 голосов
/ 15 мая 2018

Один из способов заключался бы в переносе нужного текста на новую строку в тег <span> и использовании медиазапроса, чтобы определить, на какой ширине вы хотите, чтобы произошел разрыв строки.По умолчанию элементы <span> имеют размер inline и автоматически увеличиваются до размера их содержимого / контейнера.Вам нужно явно установить <span> равным display: block, чтобы это работало.(Я также удалил все неразрывные пробелы в вашей разметке).

Я уверен, что есть много других решений, это всего лишь одна идея.

Надеюсь, что это помогает и удачи! 

.parent {
  border: 1px solid blue;
  padding: 10px;
  display: flex;
  justify-content:center;
  align-items: center;
}

.parent span {
  margin-right: 5px;
}

@media (max-width: 400px) {
  .newline {
    display: block;
  }
}
<div class="parent">
  <span>Label:</span>
  <a href="#">One liner on medium,<span class="newline">  or two line on small.</span></a>
</div>
...