CSS溢出：隐藏属性导致重叠文本

Question

我正在尝试隐藏当访客发表论坛主题帖时可能发生的任何溢出。在下图中是主题列表。我有一些输出溢出的问题，因为它应该，而其他输出似乎想要塞在自己的顶部，阻止我尝试使用溢出：隐藏。当溢出时，带有“W”和“I”的帖子工作正常：隐藏被应用。但是，例如，这篇文章说“建筑师可能是我能想到的这一件事，但......”在自身的顶部和溢出的隐藏没有任何影响。这是图像。 （我想知道这是否与某些帖子中有标点符号有关？）

以下是我的一些CSS和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

您的问题有点不清楚，因此基于合格的猜测，您可以考虑将两个CSS3属性应用于相应的HTML元素（div，h1，无论如何）：

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

希望这可能会有所帮助。最好的问候，