Как не сморщивать белое фоновое поле, когда нет текста или есть только пустое пространство

Я не знаю, как расширить цвет фона диапазона, если внутри есть такой текст.

white background is shrunk when is no text inside the  tag

Я хочу, чтобы белый фон с текстом оставался того же размера, что и белый фон с текстом.

Мой CSS

.dashboard-data-field {
  display: grid;
  grid-auto-flow: row;
  align-content: center;
}
.dashboard-data-header {
  padding: 4px;
}
.dashboard-data-description {
  padding: 8px;
  background-color: #fff;
}

Мой JavaScript

                <div className="dashboard-data-field">
                    <span className="dashboard-data-header">ชื่อ-นามสกุล</span>
                    <span className="dashboard-data-description">{`${auth.user.firstname} ${auth.user.lastname}`}</span>
                </div>

дайте элементу либо min-height, либо фиксированный height, который равен или больше, чем высота строки, включая. обивка.

tacoshy 09.04.2022 13:26
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
1
34
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете попробовать два разных решения:

  • Добавление &nbsp; в качестве содержимого элемента html, когда он должно быть пусто.
  • Или вы можете добавить атрибут стиля css min-height: 1em; в правила адресации заголовка и описания. (Я исправил эту часть по сравнению с тем, что я писал ранее)

Я выбрал второй вариант здесь, потому что он соответствует произвольно выбранному размеру шрифта css и не требует изменения логики для заполнения содержимого, добавляя непустое пространство, когда оно пусто:

.dashboard-data-field {
  display: grid;
  grid-auto-flow: row;
  align-content: center;

  /*the field background is yellow to get contrast with the description bg*/
  background-color: yellow;
}
.dashboard-data-header {
  display: block;
  padding: 4px;

  /*this shows the size of the header*/
  border: solid 1px red;

  /*minimum height is 1em even when the content is empty*/
  min-height: 1em;
}
.dashboard-data-description {
  display: block;
  padding: 8px;

  /*this background will cover the parent background*/
  background-color: #fff;

  /*this shows the size of the header*/
  border: solid 1px red;
  border-top: none;

  /*minimum height is 1em even when the content is empty*/
  min-height: 1em;
}
<div class="dashboard-data-field">
  <span class="dashboard-data-header">Header with content</span>
  <span class="dashboard-data-description">Description with content</span>
</div>

<br>

<div class="dashboard-data-field">
  <span class="dashboard-data-header"></span>
  <span class="dashboard-data-description"></span>
</div>

Мне нравится стиль &nbsp, который зависит от размера текста, но я боюсь, что выборка данных с пустой строкой заменит диапазон. Спасибо.

Paweenwat Maneechai 09.04.2022 14:09

Я обновил свой ответ с момента вашего последнего комментария, и я использую минимальную высоту, установленную на 1em. Это означает, что его высота будет равна размеру шрифта для этого элемента.

Diego De Vita 09.04.2022 15:13

Дайте фиксированную высоту для охвата того места, где вы хотите показать текст

.dashboard-data-field {
    display: grid;
    grid-auto-flow: row;
    align-content: center;
  }
  .dashboard-data-header {
    padding: 4px;
  }
  .dashboard-data-description {
    padding: 8px;
    background-color: red;
    height: 40px;
  }
const App = () => {
  return (
    <>
      <div className="dashboard-data-field">
        <span className="dashboard-data-header">ชื่อ-นามสกุล</span>
        <span className="dashboard-data-description">with text</span>
      </div>
      <div className="dashboard-data-field">
        <span className="dashboard-data-header">ชื่อ-นามสกุล</span>
        <span className="dashboard-data-description"></span>
      </div>
    </>
  );
};

export default App;

enter image description here

Я думаю, что это более простое решение, но у него фиксированная высота, если я хочу изменить font-size, я тоже должен изменить width.

Paweenwat Maneechai 09.04.2022 14:12

Другие вопросы по теме