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

Question

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,

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>

@CarlJan Thanks for the answer and commenting. I actually used tooltip function(?), and those text is in div title. I want it to make those text go next line from that. How can I do that..? — paulc1111
– paulc1111, Commented Mar 27, 2017 at 7:19

nashcheez · Accepted Answer · 2017-03-27 08:41:55Z

1

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>

edited Mar 27, 2017 at 8:41

answered Mar 27, 2017 at 7:11

nashcheez

5,1931 gold badge30 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

paulc1111 Over a year ago

Thanks for edited answer.. :'( but doesn't work it doesn't read <br> stuff, It shows like <br> as string :'(

paulc1111 Over a year ago

I think I just have to change the width size of tooltip to be longer.. :'(

nashcheez Over a year ago

Did you add data-html="true" in your html?

nashcheez Over a year ago

Can you create a fiddle or demo where we can see the code working?

paulc1111 Over a year ago

Oh man I'm sorry, I didn't see that data-html tag in the div...... I set it true and it works now!!!! :) Thank you so much for helping me out!

Justinas · Accepted Answer · 2017-03-27 07:09:47Z

1

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

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

answered Mar 27, 2017 at 7:09

Justinas

43.9k5 gold badges72 silver badges108 bronze badges

2 Comments

paulc1111 Over a year ago

Thanks for the answer. I edited my question and can you read more my question?

Justinas Over a year ago

@paulc1111 What plugin do you use? Can you provide SO Snippet instead of plain code?

Carl Binalla · Accepted Answer · 2017-03-27 07:11:00Z

0

Would this do?

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

answered Mar 27, 2017 at 7:11

Carl Binalla

5,4315 gold badges31 silver badges49 bronze badges

Comments

user4602228 · Accepted Answer · 2017-03-27 07:49:36Z

0

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 */
}

answered Mar 27, 2017 at 7:49

user4602228

Collectives™ on Stack Overflow

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

4 Answers 4

5 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related