Removing automatically added line breaks when combining Javascript + HTML

Question

Just starting off in web development and hoped one of you all could help me out. I am building a site that displays the weather along with the four-day forecast with the help of SimpleWeather.js. There's a section in my javascript where I want to display a particular day's High & Low with a "|" in the middle to divide them. I also wanted to declare a class for the "|" part so that I can change the color of the divider. However, when I do this, it adds two line breaks, and I don't understand why or how to fix it.

The code is

      $("#high-low-one").html(weather.forecasts.one.high+'<p class="high-low-divider">|</p>'+weather.forecasts.one.low);      

However it shows up as:

30

|

28 (where the 30 is the high and 28 is the low temperature for any given day.)

I've also tried fixing this in CSS using inline-text, inline-block, block, and nowrap, just to name a few. Any help would be greatly appreciated!

Answer 1

<p> Is a block element by default. You can change this with CSS but use <span> instead as it is by default an inline element

You would end up with:

 $("#high-low-one").html(weather.forecasts.one.high+'<span class="high-low-divider">|</span>'+weather.forecasts.one.low);    

However I would style the temps in span elements and use the :after pseudo-element to add and style the pipe character.

Something like:

$("#high-low-one").html("<span class='high'>" + weather.forecasts.one.high + "</span><span class='low'>" + weather.forecasts.one.low + "</span>");

With some sample css:

#high-low-one .high
{
    color:#F00;    
}

#high-low-one .high:after
{
    content: "|";
    color: #0F0;
    padding-left:0.5em;
    padding-right:0.5em;
}

#high-low-one .low
{
    color:#00F;    
}

Which would give you something like: http://jsfiddle.net/D29AH/

For Completeness if you really had to use <p> use the following CSS

.high-low-divider
{
    display:inline;
}