当我尝试添加超出div宽度的文本时,它不会在新行上显示,而是与先前的文本相同并开始重叠。有人可以看到问题并向我解释我该如何转到下一行?
编辑:我已将问题定位在样式表的CSS重置部分内。但是我无法确定是哪个部分造成了这个问题以及如何解决。我将它作为CSS包含了。
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 0;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display: block;
}
nav ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* change colours to suit your needs */
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
/* change colours to suit your needs */
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input, select {
vertical-align: middle;
}
<div class="best-comment-rs">
<div class="rs-rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<div class="comment">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at metus tincidunt, finibus massa a, faucibus arcu. In nec dignissim purus. Etiam auctor ullamcorper velit aliquam aliquam. Sed aliquam sit amet urna in pharetra. Cras orci ante, lobortis
vitae erat et, efficitur interdum mi.”</p>
</div>
</div>
答案 0 :(得分:1)
问题在于line-height
已设置为0
。
删除此:
body {
line-height: 0;
}