Блог

Главная - Вопросы по программированию - Почему текст переполняется внутри div?

Почему текст переполняется внутри div?

#html #css #sass

Вопрос:

Я делаю угловое приложение, и у меня проблема со стилями.

Я сделал пример, чтобы увидеть код: https://stackblitz.com/edit/angular-scss-demo-np12ot?file=src/app/app.component.scss

В приложении у меня есть div с тегами h1 и h2 внутри.

 <div class="ld-headings">
  <h1 class="ld-title">
    Títle 1
  </h1>
  <h2 class="ld-subtitle">
    The Louvre (English: /ˈluːv(rə)/ LOOV(-rə)[4]), or the Louvre Museum (French: Musée du Louvre [myze dy luvʁ] (About
    this soundlisten)), is the world's largest art museum and a historic monument in Paris, France, and is best known
    for being the home of the Mona Lisa.
  </h2>
</div>

А это файл css:

 .ld-headings {
  background-color: red;
  height: 40vh;

  .ld-title {
    padding-top: 18vh;

    margin: 0;
    width: 65%;
    color: white;
    font-size: 3em;
    user-select: none;
    text-transform: uppercase;
    font-weight: 400;
  }

  .ld-subtitle {
    font-style: italic;
    font-weight: 400;
    color: white;
    width: 50%;
    font-size: 1.3em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
      'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
      'Helvetica Neue', sans-serif;
  }
}

@media (max-width: 900px) {
  .landing {
    .ld-headings {
      .ld-title {
        font-size: 3em;
      }

      .ld-subtitle {
        font-size: 1em;
      }
    }
  }
}

В начале я вижу это и правильно:
введите описание изображения здесь

Но когда я изменяю размер окна браузера, результат следующий. Текст переполнен: введите описание изображения здесь

Я не понимаю, почему это происходит, когда я использую устройство em. Кто-нибудь может мне помочь?

Решение word-break: break-all; бесполезно, и я хочу сохранить высоту div.

Комментарии:

1. Вероятно, из-за ширины: 65%;?

Ответ №1:

Эта проблема возникает из-за того, что вы задали высоту для div с именем класса ld-заголовки. Когда вы удалите height: 40vh; его, он займет высоту содержимого. При изменении размера браузера размеры текста увеличиваются, и в нем должно быть достаточно места, чтобы сделать его видимым. Пожалуйста, проверьте обновленный код.

https://angular-scss-demo-hcgg8h.stackblitz.io

https://stackblitz.com/edit/angular-scss-demo-hcgg8h?file=src/app/app.component.scss

Комментарии:

1. А если я захочу сохранить высоту? Как вы решаете эту проблему?

Ответ №2:

родительский класс .ld-заголовки имеет высоту:40vh, удалив его или изменив на высоту:авто, вы можете получить желаемый результат.

также я полагаю, что вы хотите, чтобы ширина класса .ld-заголовка и .ld-субтитров составляла 65% и 50% соответственно.

если это так, как сказано выше, изменение высоты может дать желаемый результат

если вы измените цвет .ld-субтитров на черный и добавите переполнение:видно .ld-заголовки, которые вы можете понять, я хочу передать(сохраняя высоту:40 вч, хотя)

Метки: