Html 如何使文本填充div不溢出？

我试图在网格中填充文本，以便在各种设备上都能阅读。我还希望文本居中对齐（垂直和水平）

HTML:

桌面输出：

笔记本电脑输出：

iPad输出：

正如您在所有输出中看到的，网格中的文本要么太小而无法读取（桌面），要么从网格溢出（笔记本电脑），要么更改网格大小（iPad）。我所做的是在所有设备上保持文本可读性和居中，同时保持页面的网格形状。我该怎么做

---

谢谢

我建议不要让CSS中的事情过于复杂，有更好的方法，也更可靠。例如，使用CSS-Flex

.alternate\u 2{
背景色：rgb（250244246）；
}
.行{
显示器：flex；
柔性包装：包装；
文本对齐：居中；
}
.col-lg-3{
宽度：100%；
填充物：2vw；
框大小：边框框；
显示器：flex；
弯曲方向：立柱；
}
.v-align、.text{
柔性生长：1；
显示器：flex；
弯曲方向：立柱；
}
.文本{
证明内容：中心；
}
@介质（最小宽度：500px）{
.col-lg-3{
宽度：50%；
}
}
@介质（最小宽度：1200px）{
.col-lg-3{
宽度：25%；
}
}

太阳能跟踪器
太阳能跟踪器是一种控制太阳能电池板定位以利用最大可用阳光量的设备
了解更多
种植者
使用Arduino、grow light和各种传感器在室内种植植物的受控环境
了解更多
家庭自动化
家庭自动化是一种建筑系统，允许我们对家中的电器进行数字控制
了解更多
印刷电路板设计
PCB代表印刷电路板。一种印刷电路板，使用从层压在非导电基板的片层上和/或片层之间的一个或多个铜片层蚀刻的导电轨道、焊盘和其他特征，以机械方式支撑和电连接电气或电子元件

了解更多
格里奥工作室
Lorem ipsum Door sit amet，是一位杰出的领导者。Nam pretium dui ultrices，ornare mauris in，ultrices sapien。在这句名言中，他是一个坚定的拥护者。在康格
了解更多
网络开发
Lorem ipsum Door sit amet，是一位杰出的领导者。Nam pretium dui ultrices，ornare mauris in，ultrices sapien。在这句名言中，他是一个坚定的拥护者。在康格
了解更多
数据可视化
Lorem ipsum Door sit amet，是一位杰出的领导者。Nam pretium dui ultrices，ornare mauris in，ultrices sapien。在这句名言中，他是一个坚定的拥护者。在康格
了解更多
Stem CS实验室
Lorem ipsum Door sit amet，是一位杰出的领导者。Nam pretium dui ultrices，ornare mauris in，ultrices sapien。在这句名言中，他是一个坚定的拥护者。在康格
了解更多

使用

flexbox

和

自动边距

我们可以垂直和水平对齐

演示

[flex]{
宽度：400；
高度：200px；
边框：1px实心；
显示器：flex；
}
[flex]>span{
保证金：自动；
}

---

一些文本

如果没有任何奇怪的规则，文本永远不会溢出/重叠。在本例中，您使用的是导致此行为的

位置：绝对

和

变换：平移

。您是否复制了2011年SO问题中的

v-align

类？我认为在2020年，垂直对齐元素有更好的解决方案。实际上，我做到了，其他方法似乎都不起作用。我还能做些什么使它垂直居中呢？Op说我还希望文本居中（垂直和水平）。这段代码在台式机上运行，但在我的笔记本电脑和iPad上，网格被破坏了。然后使用一些媒体查询。查看更新后的答案。有没有一种方法可以减少文本比div大的字体（该特定div的字体），而不是使其可滚动？

<div class="d-none d-lg-block">
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3">
      <h1 class="display-6">Solar Tracker</h1>
      <div class="v-align">
        <p class="text">The Solar Tracker is a device that that controls the positioning of a Solar Panel as to utilize the maximum amount of sunlight available. </p>
        <button onclick="window.location.href='projects/solar_tracker.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
      </div>
    </div>
    <div class="col-lg-3 alternate_2">
      <h1 class="display-6">Plant Grower</h1>
      <div class="v-align">
        <p class="text">A controlled environment to grow plants indoors, using an Arduino, a grow light, and various sensors.</p>
        <button onclick="window.location.href='projects/plant.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
      </div>
    </div>
    <div class="col-lg-3">
      <h1 class="display-6">Home Automation</h1>
      <div class="v-align">
        <p class="text">Home Automation is building systems which allow us to digitally control the appliances in our homes.</p>
        <button onclick="window.location.href='projects/home_automation.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
      </div>
    </div>
    <div class="col-lg-3 alternate_2">
      <h1 class="display-6">PCB Design</h1>
      <div class="v-align">
        <p class="text">PCB stands for Printed Circuit Board. A printed circuit board mechanically supports and electrically connects electrical or electronic components using conductive tracks, pads and other features etched from one or more sheet layers of copper laminated onto and/or between sheet layers of a non-conductive substrate.</p>
        <button onclick="window.location.href='projects/pcb_design.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-3 alternate_2">
      <h1 class="display-6">Studio Griot</h1>
      <div class="v-align">
        <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
        <button onclick="window.location.href='internships/studio_griot.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
      </div>
    </div>
    <div class="col-lg-3">
      <h1 class="display-6">Web Development</h1>
      <div class="v-align">
        <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
        <button onclick="window.location.href='projects/web_development.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
      </div>
    </div>
    <div class="col-lg-3 alternate_2">
      <h1 class="display-6">Data Visualisation</h1>
      <div class="v-align">
        <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
        <button onclick="window.location.href='projects/data_visualisation.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
      </div>
    </div>
    <div class="col-lg-3">
      <h1 class="display-6">Stem CS Labs</h1>
      <div class="v-align">
        <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
        <button onclick="window.location.href='internships/stem_cs.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
      </div>
    </div>
  </div>
</div>

@media(min-width:1100px){
.row{
  height: 50vh;
}
.col-lg-3{
  text-align: center;
  position: relative;
}
.v-align{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
 }
}
@media(min-width:750px){
.row{
  height: 50vh;
}
}
.alternate_2{
  background-color: rgb(250,244,246);
}
.display-6{
  padding-top: 20px;
}
.text{
  text-align: center;
}