[英]Removing automatically added line breaks when combining Javascript + HTML
Just starting off in web development and hoped one of you all could help me out. 刚开始进行Web开发,并希望你们所有人中的一员能对我有所帮助。 I am building a site that displays the weather along with the four-day forecast with the help of SimpleWeather.js . 我正在借助SimpleWeather.js构建一个显示天气以及四天天气预报的网站。 There's a section in my javascript where I want to display a particular day's High & Low with a "|" 我的javascript中有一个部分,我想用“ |”显示某天的最高价和最低价。 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.) 28(在任何一天,最高温度为30,最低温度为28)。
I've also tried fixing this in CSS using inline-text, inline-block, block, and nowrap, just to name a few. 我还尝试使用内联文本,内联块,块和nowrap在CSS中修复此问题,仅举几例。 Any help would be greatly appreciated! 任何帮助将不胜感激!
<p>
Is a block element by default. <p>
默认情况下是一个块元素。 You can change this with CSS but use <span>
instead as it is by default an inline element 您可以使用CSS进行更改,但请使用<span>
因为默认情况下它是内联元素
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. 但是,我会在span
元素中设置临时字体的样式,并使用:after
伪元素添加和设置管道字符的样式。
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: 带有一些示例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/ 这会给你类似的东西: http : //jsfiddle.net/D29AH/
For Completeness if you really had to use <p>
use the following CSS 为了完整起见,如果您真的必须使用<p>
使用以下CSS
.high-low-divider
{
display:inline;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.