即使没有溢出，如何使文本在css的下一行？

Question

我是html和css的新手。即使文本没有在css中溢出，我也试图让文本进入下一行。 现在它从页面中提供，如

但是，我希望像

这样

Temperature : 13 Celsius
CO2: 345 ppm
Humidity: 13%

我怎么能做这样的事情？我试图在谷歌找到，但无法找到我想要的任何解决方案。

提前致谢。

修改 我实际上使用了如下工具提示功能

$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();
});

然后我在上面显示的文字位于div title

<div id="my id" class="draggable js-drag" data-toggle="tooltip" data-placement="top" 
style="display: block; position: absolute; left: 894px; top: 413px;" 
data-x="894" data-y="413" 
data-original-title="Temperature : 13.0 °C CO2 : 345 ppm Humidity : 13.0 %"></div>

Answer 1

只需在文字中添加<br/>即可指示换行

Temperature : 13 Celsius<br/>
CO2: 345 ppm<br/>
Humidity: 13%<br/>

Answer 2

使用多个div。

div默认为display: block，占据整个行中的空间，迫使另一行div进入下一行。

参考代码：

＆＃13;

＆＃13;

<div>
  <div>Temperature : 13 Celsius</div>
  <div>CO2: 345 ppm</div>
  <div>Humidity: 13%</div>
</div>

＆＃13;

＆＃13;

＆＃13;

修改

要在data-original-title中应用换行符，您需要在标记中添加data-html="true"。您可以手动将其添加到标记中或使用jquery。然后，您可以在代码中添加<br/>。

$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip().attr("data-html", "true");
});

<div id="my id" class="draggable js-drag" data-toggle="tooltip" data-placement="top" data-html="true"
style="display: block; position: absolute; left: 894px; top: 413px;" 
data-x="894" data-y="413" 
data-original-title="Temperature : 13.0 °C <br/> CO2 : 345 ppm <br/> Humidity : 13.0 %"></div>

Answer 3

这会吗？

<p>Temperature : 13 Celsius</p>
<p>CO2: 345 ppm</p>
<p>Humidity: 13%</p>

Answer 4

我会使用DIV解决方案，P标记会给出一个默认的边距值，这对于简单的换行符不是必需的。

<div>Temperature : 13 Celsius</div>
<div>CO2: 345 ppm</div>
<div>Humidity: 13%</div>

然后您可以使用

设置行高

CSS：

div{
   line-height:14px; /* for example */
}