CODEWITHSUNDEEP
htmlcss
paulc1111
paulc1111

Reputation: 651

How to make text go next line in css even if it is not overflow?

I'm a newbie in html and css. I'm trying to make text go next line even if the text is not overflowed in css. Now it gives from the page like,

enter image description here

However, I want to be like such as 

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

How can I do such a thing? I tried to find in google but couldn't find any solutions that I want.

Thanks in advance.

EDIT I actually used tooltip function like below

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

and then the text that I showed above is in 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>

Upvotes: 0

Views: 2716

Answers (4)

nashcheez
nashcheez

Reputation: 5183

Use multiple div.

The div is a display: block by default and would occupy the entire space in the line, forcing the other div onto the next line.

Refer code:

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

EDIT

To apply a line break in data-original-title you need to add data-html="true" in your markup. Either you can manually add it in your markup or using jquery. And then you can add <br/> in your code.

$(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>

Upvotes: 1

user4602228
user4602228

Reputation:

I would go with the DIV solution, P tag would give a default margin value which is not required for a simple line break.

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

You could then set the line-height using

CSS:

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

Upvotes: 0

Carl Binalla
Carl Binalla

Reputation: 5401

Would this do?

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

Upvotes: 0

Justinas
Justinas

Reputation: 43441

Simply add <br/> to your text to indicate line break

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

Upvotes: 1

Related Questions