时间戳

首页 > 解决方案 > 每次不适合容器时，如何使 html 中的文本变小

javascript - 每次不适合容器时，如何使 html 中的文本变小

问题描述

所以我有一个简单的 html 和 css 设置，看起来像这样

HTML：

<div class="box">
  
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, ab! Non esse natus aliquid id est placeat dolorem velit explicabo.</p>
  
</div>

CSS：

.box{
  height: 100px;
  width: 300px;
  background-color: blue;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%)
}

它看起来像这样

在此处输入图像描述

但是如果我向它添加更多字符，它将扩散到预期的容器之外

在此处输入图像描述

但是你是怎么做到的，如果文本要展开，它会缩小而不是把它放在容器内？

标签： javascripthtmlcss

解决方案

您可以删除高度属性...

 .box{
  width: 300px;
  background-color: blue;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%)
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div class="box">

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, ab! Non esse natus aliquorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, ab! Non esse natus aliquorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, ab! Non esse natus aliquorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, ab! Non esse natus aliquid id est placeat dolorem velit explicabo.</p>

</div>
</body>
</html>

推荐阅读