how do I make fixed text

Question

In my web page I have some paragraphs some can occupy a max width of 300px, others are just one line of text without width limit, I set the font size to 12px, but when I zoom out the text on the paragraphs with a limit width expands downwards and the ones who don't have a limit expand sideways. Can someone help me? If possible could you explain why it happens?

Ok, now that I have access to my computer here's the code

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

Well without the code posted here I'm going to just explain it in general.

When you have an area fixed to a certain width and filled with text, the browser will (unless there's a height limit as well) fill all the space it can with that text. Since that box is limited to 300px wide, the rest has only one place to go: Vertically.

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.