希望有一个p元素来动态填充（通过文本大小）父div

Question

我有一个p元素，其中包含大量文本（多行），并且我希望它自动填充父级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>

Answer 1

使用断字：全部中断；所需元素的属性，它将给定元素包装在父div中。例如：

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