CSS overflow:hidden 属性导致文本重叠

Question

我试图隐藏访客创建论坛主题时可能发生的任何溢出 post。下图中是主题列表。我遇到了一些输出溢出的问题，而其他输出似乎想要塞满自己，阻碍了我使用 overflow:hidden 的尝试。当应用 overflow:hidden 时，带有 "W" 的 post 和 "I" 工作正常。但是，例如，表示 "Architects may be the one thing I can think of this time but...." 的 post 在其自身之上填充并且溢出隐藏没有效果。这是图像。（我想知道这是否与某些 post 中有标点符号这一事实有关？）

这是我的一些 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;

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

CSS overflow:hidden 属性导致文本重叠

CSS overflow:hidden property causes overlapping text

html

css

overflow

CSS overflow:hidden 属性 导致文本重叠

CSS overflow:hidden property causes overlapping text

html

css

overflow

CSS overflow:hidden 属性导致文本重叠