文本不换行
Text is not going on a new line
当我尝试添加超过 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>
问题是 line-height
已设置为 0
。
删除这个:
body {
line-height: 0;
}
当我尝试添加超过 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>
问题是 line-height
已设置为 0
。
删除这个:
body {
line-height: 0;
}