Question

在我的网页中我有一些段落可以占用最大宽度300px，其他只是一行没有宽度限制的文本，我将字体大小设置为12px，但是当我缩小段落上的文字时限制宽度向下扩展，没有限制的扩展横向扩展。有人能帮我吗？如果可能的话，你可以解释它为什么会发生吗？

好的，现在我可以访问我的电脑，这是代码

HTML

<div class="mgd">
    <p>Mobile group decision making platform.</p>
</div>

<div  class="firstdesc desc">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam</p>
</div>

CSS

.mgd{
  text-align:left;
  font-family: Lucida Sans Unicode;
  font-size: 12px;
  color: white;
  position: absolute;
  top: 46.28571428571429%;
  left: 31.57894736842105%;
}

.desc{
  position: absolute;
  font-family: Lucida Sans Unicode;
  color: white;
  width:300px;
  overflow:hidden;
  max-height:60px;
  font-size:12px;
  text-align: justify;
  top:53.97727272727273%;
}
.firstdesc{
  left:23.94736842105263%;
}

Answer 1

如果没有这里发布的代码，我只会解释一下。

当您将某个区域固定到某个宽度并填充文本时，浏览器将（除非还有高度限制）填充该文本的所有空间。由于该盒子的宽度限制为300px，其余的只有一个地方：垂直。

没有限制的线条像液体一样。它会扩展以填充它占用的任何容器。

如果您希望300px容器保持文本不向下扩展，请在您的css中使用它（将.class-name更改为适合您的名称）：

.class-name {
    overflow: hidden;
    max-height: 500px;
    height: auto;
}

你可以通过多种方式实现这一目标，但这会让你走上正轨。如果您希望滚动条全部可见，则可以将“隐藏”切换为“滚动”。

如何制作固定文字

1 个答案: