Текст заезжает за края

Question

Как пофиксить заезд текста за края? overflow: hidden. padding не помог.

<v-card
        class="custom-debug d-flex"
        style="overflow: hidden; padding: 30px 20px 20px 20px; margin: 0 130px 0 0"
        height="530"
        :elevation="10"
    >
        ...
            <v-card-text
                class="subtitle-1 text-justify"
                style="color: #888888"
            >
                {{ course.description }}
                {{ course.description }}
                {{ course.description }}
                {{ course.description }}
                {{ course.description }}
                {{ course.description }}
                {{ course.description }}
                {{ course.description }}
                {{ course.description }}
            </v-card-text>
...
    </v-card>

Проблема в том, что рамка обрезается и уезжает вниз. Это происходит из-за того, что выставлен overflow: hidden. Соответственно, паддинг не работает.

Update для

Уберите у родителя padding: 30px 20px 20px 20px; и поставьте дочке margin: 30px 20px 20px 20px;

Answer 1

Добавьте overflow: hidden к v-card-text.

UPD. Обновил пример. Рамка не заезжает, отступ снизу можете регулировать через padding у card.

:root {
  --pad-section: 15px;
  --bg: #e6e6e6;
}

.card {
  height: 150px;
    padding: 25px;
      background-color: var(--bg);
}

.card__description {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 100%;
  border: 1px solid black;
}

.card__header {
  border-bottom: 1px solid black;
  padding: var(--pad-section);
}

.card__text {
  margin: var(--pad-section);
  overflow: hidden;
}

p {
  margin: 1px 0;
}

p:nth-child(odd) {
  background-color: lightblue;
}

<div class="card">
  <div class="card__description">
    <div class="card__header">Title</div>
    <div class="card__text">
      <p>Lorem</p>
      <p>Lorem</p>
      <p>Lorem</p>
      <p>Lorem</p>
      <p>Lorem</p>
      <p>Lorem</p>
      <p>Lorem</p>
      <p>Lorem</p>
      <p>Lorem</p>
      <p>Lorem</p>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Текст заезжает за края

Ответы (1 шт):