结合 Javascript + HTML 时删除自动添加的换行符

【问题标题】：Removing automatically added line breaks when combining Javascript + HTML结合 Javascript + HTML 时删除自动添加的换行符
【发布时间】：2014-01-30 02:49:24
【问题描述】：

刚开始从事 Web 开发，希望你们中的任何人都可以帮助我。我正在建立一个网站，在SimpleWeather.js 的帮助下显示天气和四天预报。在我的 javascript 中有一个部分，我想用“|”显示特定日期的最高价和最低价在中间划分它们。我还想为“|”声明一个类部分，以便我可以更改分隔线的颜色。但是，当我这样做时，它会添加两个换行符，我不明白为什么或如何修复它。

代码是

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

但它显示为：

28 （其中 30 是高温，28 是任何一天的低温。）

我还尝试在 CSS 中使用 inline-text、inline-block、block 和 nowrap 来修复这个问题，仅举几例。任何帮助将不胜感激！

【问题讨论】：

标签： javascript html css line line-breaks

【解决方案1】：

<p> 默认是块元素。您可以使用 CSS 更改它，但使用 <span> 代替，因为它默认是内联元素

你最终会得到：

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

但是，我会在 span 元素中设置临时样式，并使用 :after pseudo-element 添加管道字符并设置其样式。

类似：

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

带有一些示例 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;    
}

这会给你类似的东西：http://jsfiddle.net/D29AH/

如果您真的必须使用<p>，请使用以下 CSS 以确保完整性

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

【讨论】：