Способы иметь элемент ap для динамического заполнения (через размер текста) родительского div - PullRequest
Новая
       22

Способы иметь элемент ap для динамического заполнения (через размер текста) родительского div

0 голосов
/ 08 ноября 2019

У меня есть элемент ap с большим объемом текста (многострочный), и я хочу, чтобы он автоматически заполнял родительский элемент div: текст должен заполнять родительский элемент как можно меньшим количеством строк, при этом текст должен быть легко читаемым,Насколько я понимаю, лучший способ сделать это - изменить размер шрифта.

Я перепробовал несколько js-плагинов для «подгонки текста», но ни один из них не работает для многострочных абзацев.

Я думаю, что это возможно при использовании нескольких медиазапросов CSS. Но я хочу знать, есть ли лучший способ автоматизировать это для приложений. 

#content-grid {
  margin: 27px 0px 50px 0px;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-auto-rows: 1fr;
  grid-row-gap: 0px;
  grid-column-gap: 0px;
  color: #D9D9D9;
}

#content-grid::before {
  content: '';
  width: 0;
  padding-bottom: 100%;
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

.item>p {
  margin: 35px;
  /*overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;*/
  color: black;
  line-height: 1.5em;
  font-size: .85em;
}

@media (max-width:950px) {
  #content-grid {
    grid-template-columns: 50% 50%;
  }
}
<div id="content-grid">
  <div class="item" style="background-color:#e6e6e6;">
    <h3>Theres Gonna Be a Heading Here, Too</h3>
    <p style="object-fit: cover;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis vitae ligula in convallis. Aenean vitae lorem vitae nunc tristique maximus. Sed semper mauris leo, non congue felis ullamcorper non. Maecenas leo sapien, faucibus consequat ultricies
      eu, mollis vitae leo. Morbi quis tortor eu purus mattis viverra. Pellentesque gravida lectus turpis, iaculis ultricies nibh vestibulum volutpat. Donec placerat augue lorem, quis porta enim vehicula sed. Pellentesque habitant morbi tristique senectus
      et netus et malesuada fames ac turpis egestas. Mauris id consectetur magna. Aliquam interdum nisl elit, sit amet ultrices erat scelerisque nec. Aenean at felis lobortis, ultrices purus nec, iaculis tellus. Curabitur diam dolor, egestas sed iaculis
      cursus, vestibulum sed neque. Cras quis eleifend eros. Vestibulum est arcu, auctor et nisi vitae, malesuada maximus massa. Nam ut sodales nunc. Phasellus mauris sem, consequat sit amet enim ac, placerat consectetur arcu. Cras pellentesque arcu nec
      est finibus lobortis. Nunc et ligula libero. Nullam eget dolor non tellus commodo vulputate non at tortor. Nullam porta id ligula in placerat.
    </p>
  </div>
  <div>
  </div>
  <div>
    <p>
      There are several more divs, but they have very little text so the problem does not apply to them
    </p>
  </div>


</div>

1 Ответ

0 голосов
/ 08 ноября 2019

Использовать перенос слов: ломать все;свойство для нужного элемента, он будет обернуть данный элемент внутри родительского div. например: 

item>p{word-break:break-all;}
...