Поведение фона текстового узла при переносе

#html #css

#HTML #css

Вопрос:

У меня возникли проблемы с поведением, которого я никогда раньше не видел. Я добавил код, потому что Stack Overflow просит меня поместить его в свой пост, но я бы порекомендовал вам зайти в Codepen, чтобы попробовать это самостоятельно.

HTML:

 <html>
  <body>
    <div class="card">
      <div class="name">Testing and Testeronintendo</div>
      <div class="star">X</div>
    </div>
  </body>
</html>

CSS:

 body {
  width: 200px;
  margin: 0;
  background: green;
  border: 5px solid black;
  height: 100vh;
}

.card {
  padding: 10px;
  max-width: 300px;
  background: yellow;
  display: flex;
  justify-content: space-between;
}

.name {
  background: red;
}

Вот изображение с нарисованным от руки примером поведения, которое я ожидаю / нуждаюсь: https://i.stack.imgur.com/2tWRH.png

Объяснение: я не хочу, чтобы красный фон простирался до X, я просто хочу, чтобы он аккуратно обтекал текст div.

1. Оберните свой текст в a span и создайте для него фон. .name фон div будет отображаться в соответствии с его размером.

2. К сожалению, это не работает, я уже пробовал это раньше. Тем не менее, спасибо за комментарий!

Ответ №1:

Просто добавьте минимальное значение ширины в свой класс name. Насколько я знаю, прочитав ваш вопрос, я понимаю, что вы хотите сделать красный фон таким, какой он необходим.

 body {
  width: 200px;
  margin: 0;
  background: green;
  border: 5px solid black;
  height: 100vh;
}

.card {
  padding: 10px;
  max-width: 300px;
  background: yellow;
  display: flex;
  justify-content: space-between;
}

.name {
  background: red;
  width: min-content;
  padding: 4px;
}

 <html>
  <body>
    <div class="card">
      <div class="name">Testing and Testeronintendo</div>
      <div class="star">X</div>
    </div>
  </body>
</html>