Как получить текст с окончанием nowrap, чтобы он удобно помещался в моем контейнере

#css #flexbox

Вопрос:

Я хочу, чтобы серое поле заполнилось до того места, где заканчивается «длинный», чтобы весь этот текст можно было центрировать. Наличие фиксированной ширины не будет работать, так как текст внутри .ребенок может измениться.

Правка: Хотелось бы, чтобы это выглядело как предложение. Как если бы после гиперссылки было больше текста, я бы хотел, чтобы он продолжал течь как предложение.

Ниже приведено то, что я надеюсь, что это будет

Вот ссылка на кодовую строку

 <style>

.container {
  border: 1px solid blue;
}
.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  
  margin: 16px;
}

.child {
  border: 0.5px solid gray;
}

a {
  white-space: nowrap;
}
</style>

<div class="container">
    <div class="parent">
        <div class="child">This is a sentence that is long <a href="#">Click here</a></div>
    </div>
</div>

У меня такое чувство, что то, на что я надеюсь, невозможно из-за того, как работает nowrap.

1. Вы можете просто добавить display:block к a элементу -, чтобы получить этот эффект, или я что-то упускаю?

2. @jonyeezs не могли бы вы уточнить, можете ли вы добавить display:block a или нет?

3. @Nilanshu96 к сожалению, это не сработает. Может быть, я не ясно дал понять, что это предложение. Поэтому, если я добавлю больше текста после гиперссылки, я не хочу, чтобы он переходил в новую строку.

Ответ №1:

Решение 1

Способом достижения желаемого результата было бы использование flexbox на дочернем элементе, как это:

 .child {
  border: 0.5px solid gray;
  display: flex;
  flex-direction: column;
}

Решение 2

Оберните свой текст «Это длинное предложение» в элемент p внутри дочернего div следующим образом:

 <div class="container">
    <div class="parent">
        <div class="child">
          <p>This is a sentence that is long</p>
          <a href="#">Click here</a>
        </div>
    </div>
</div>

И поскольку p является элементом блока, дочерний div не будет занимать больше, чем текст внутри. Все, что вам нужно будет сделать, это переопределить поля по умолчанию для элемента p, чтобы получить желаемый результат.

Ответ №2:

Да, братан, просто поменяй тег a на блок отображения. Я уже сделал это в коде yow из

a { пробел: nowrap; }

Для

a { дисплей: блок }