CSS overflow:hidden property causes overlapping text

Question

I am trying to hide any overflow that might occur when a guest makes a forum topic post. In the image below are a list of topics. I am having trouble with some output overflowing as it should while other output seems to want to cram on top of itself, thwarting my attempts at using overflow:hidden. The posts with the "W"'s and the "I"'s work fine when overflow:hidden is applied. But, for example, the post that says "Architects may be the one thing I can think of this time but...." crams on top of itself and overflow hidden has no effect. Here is the image. (I'm wonding if this has something to do with the fact that some posts have punctuation in them?)

Here is some of my CSS and HTML:

#topic-area .topic {
position:relative;
width:998px;
padding-left:12px;
padding-right:12px;
border-bottom:1px dashed;
border-left:1px dashed;
border-right:1px dashed;
}
#topic-area .topic .cutoff {
font-family:courier;
position:relative;
top:0px;
width:500px;
height:60px;
float:left;
border:1px solid;
}
#topic-area .topic h3 {
float:left;
display: block;
position:relative;
}
#topic-area .topic a {
display: block;
position:relative;
}

#topic-area {
	position:relative;
	top:0px;
	width:1024px;
}
#topic-area #topic-head {
	position:relative;
	width:1024px;
	text-align:center;
	border-bottom:1px dashed;
}
#topic-area #topic-head h2 {
	line-height:0%;
	text-decoration:underline;
}
#topic-area #topic-head a {
	color:black;
	text-decoration:none;
}
#topic-area #topic-head a:hover {
	text-decoration:underline;
}
#topic-area .topic {
	position:relative;
	width:998px;
	padding-left:12px;
	padding-right:12px;
	border-bottom:1px dashed;
	border-left:1px dashed;
	border-right:1px dashed;
}
#topic-area .topic .cutoff {
	font-family:courier;
	position:relative;
	top:0px;
	width:500px;
	height:60px;
	float:left;
	border:1px solid;
    overflow:hidden;
}
#topic-area .topic h3 {
	float:left;
	display: block;
	position:relative;
}
#topic-area .topic a {
	display: block;
	position:relative;
}
#topic-area .topic a {
	text-decoration:none;
	color:black;
	line-height:0%;
}
#topic-area .topic a:hover {
	text-decoration:underline;
	color:black;
}
#topic-area .topic .started-by {
	
	position:relative;
	color:grey;
	font-size:.8em;
	line-height:0%;
	clear:both;
}
#topic-area .topic .replies-category {
	font-size:.8em;
	line-height:0%;
	color:grey;
	position:relative;
	float:right;
	text-align:right;
}

    <div id="topic-area">	
    <div class="topic">
	<div class="cutoff">
	<h3><a href="#">EXAMPLE TITLE EXAMPLE TEXT EXAMPLE TEXT EXAMPLE TEXT EXAMPLE TEXT</a></h3>
	</div>
    <div class="replies-category">
    <p>Replies: X</p>
    <p>Category: EXAMPLE CATEGORY</p>
    </div>
    <p class="started-by">Started by Xname on Xdate</p>
    </div>
        <div class="topic">
	<div class="cutoff">
	<h3><a href="#">ANOTHER EXAMPLE WHERE TEXT MIGHT RUN OVER OUTSIDE THE BOX..............</a></h3>
	</div>
    <div class="replies-category">
    <p>Replies: X</p>
    <p>Category: EXAMPLE CATEGORY</p>
    </div>
    <p class="started-by">Started by Xname on Xdate</p>
    </div>
    </div>

Answer 1

Your question is a bit unclear, so based on just qualified guess, you may consider using two CSS3 properties applied to the appropriate HTML element ( div, h1, whatsoever):

overflow-x:hidden;
white-space: nowrap;

Hope this may help. Best regards,