Search code examples
htmlcsstextnewlineoverlapping

Text is not going on a new line


When I try to add text that exceeds the width of my div it doesn't go on a new line but starts the same as the previous text and starts overlapping. Can someone see the issue and explain to me how I can make go to the next line instead?

EDIT: I've located the problem to be within my CSS reset part of my stylesheet. But I can't tell which part creates this problem and how I will be able to solve it. I've included it as my css instead.

Example of how it looks

    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>


Solution

  • The issue is that line-height has been set to 0.

    Remove this:

    body {
        line-height: 0;
    }