3

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

好的，现在我可以访问我的计算机，这是代码

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%;
}
4

1 回答 1

3

好吧，如果没有此处发布的代码，我将对其进行一般性解释。

当您将某个区域固定为特定宽度并填充文本时，浏览器将（除非也有高度限制）用该文本填充它可以填充的所有空间。由于该框被限制为 300 像素宽，其余的只有一个地方可以去：垂直。

The line without a limit is like a liquid. It expands to fill whatever container it occupies.

If you want that 300px container to keep the text from expanding downward, use this in your css (change .class-name to whatever it is for you):

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

You can do it a number of ways but that'll get you on the right track. You can switch "hidden" for "scroll" if you would rather it be all visible with a scrollbar.

于 2013-09-15T00:12:45.453 回答