CODEWITHSUNDEEP
htmlcss
SoBiT
SoBiT

Reputation: 408

Text before <span> is forced to new line

I made a codepen to show the issue: http://codepen.io/anon/pen/dMbzop

It's like

<div id="demowrapper">
    <div class="rtecenter" style="text-align: center;">&nbsp;</div>
    <p class="rtecenter"><span style="font-size:14px"><span style="color:rgb(72, 155, 201)"><span style="font-family:avenirltstd-heavy">Good Morning&nbsp;</span></span></span></p>
    <p class="rtecenter"><span style="font-size:14px"><span style="background-color:rgb(255, 255, 255); font-family:avenirltstd-book">Harnessing the vivacity of your body’s circadian rhythm,&nbsp;</span><span style="font-size:16px"><span style="font-family:didotltpro-roman">FONDATION</span></span><span style="background-color:rgb(255, 255, 255); font-family:avenirltstd-book">&nbsp;brings you positive energy right from the start.</span></span></p>
    <div class="rtecenter">&nbsp;</div>
</div>

and CSS:

#demowrapper {
  max-width: 440px;
  background-color: #666;
}

So why is the 'rhythm' wrapping to the next line instead of filling the line above?

This is an issue one of our customers has. I cannot figuere out why browsers behave like this. Any ideas?

Upvotes: 2

Views: 1427

Answers (3)

j08691
j08691

Reputation: 208032

You're using &nbsp; in your string, which essentially creates one long string of text that won't break unless you force it:

rhythm,&nbsp;</span><span style="font-size:16px"><span style="font-family:didotltpro-roman">FONDATION</span></span><span style="background-color:rgb(255, 255, 255); font-family:avenirltstd-book">&nbsp;brings

Either change the &nbsp; to normal spaces:

#demowrapper {
  max-width: 440px;
  background-color: #666;
}
<div id="demowrapper">
<div class="rtecenter" style="text-align: center;">&nbsp;</div>
<p class="rtecenter"><span style="font-size:14px"><span style="color:rgb(72, 155, 201)"><span style="font-family:avenirltstd-heavy">Good Morning&nbsp;</span></span></span></p>
<p class="rtecenter"><span style="font-size:14px"><span style="background-color:rgb(255, 255, 255); font-family:avenirltstd-book">Harnessing the vivacity of your body’s circadian rhythm, </span><span style="font-size:16px"><span style="font-family:didotltpro-roman">FONDATION</span></span><span style="background-color:rgb(255, 255, 255); font-family:avenirltstd-book"> brings you positive energy right from the start.</span></span></p>
<div class="rtecenter">&nbsp;</div>
</div>

So why is 'rhythm' on a new line?

Or force breaking with something like word-break: break-all;:

#demowrapper {
  max-width: 440px;
  background-color: #666;
}
p {
  word-break: break-all;
}
<div id="demowrapper">
  <div class="rtecenter" style="text-align: center;">&nbsp;</div>
  <p class="rtecenter"><span style="font-size:14px"><span style="color:rgb(72, 155, 201)"><span style="font-family:avenirltstd-heavy">Good Morning&nbsp;</span></span>
    </span>
  </p>
  <p class="rtecenter"><span style="font-size:14px"><span style="background-color:rgb(255, 255, 255); font-family:avenirltstd-book">Harnessing the vivacity of your body’s circadian rhythm,&nbsp;</span><span style="font-size:16px"><span style="font-family:didotltpro-roman">FONDATION</span></span>
    <span
    style="background-color:rgb(255, 255, 255); font-family:avenirltstd-book">&nbsp;brings you positive energy right from the start.</span>
      </span>
  </p>
  <div class="rtecenter">&nbsp;</div>
</div>

So why is 'rhythm' on a new line?

Upvotes: 7

enthus1ast
enthus1ast

Reputation: 2109

The &nbsp; is causing this. The line with the next word would not fit.

"The HTML entity   is a non-breaking, or hard, space. It renders like a normal space " ", but prevents a line wrap from occurring" from there: https://en.wikipedia.org/wiki/Wikipedia:Line-break_handling#.26nbsp.3B

Upvotes: 1

Daniel Casserly
Daniel Casserly

Reputation: 3480

I think the issue is with the lack of spaces between words in your code pen if you were to add a space (rather than &nbsp;) it seems to work as you wish (also remember to put spaces between spans in order to push things on to another line.

The main issue seems to be that you have one long word across many spans.

Upvotes: 1

Related Questions