How can I format this div without the text inside breaking a line?

Question

I have this html code

<h2>
  <div style="display:flex">
  <div>
    Section III :
  </div>
  <div>
    Very long parangrapgggggggggggggggggggggggggggggggggggggggggggggggggggggggg
  </div>
  </div>
</h2>

The space inside the first div makes a new line, Can any body suggest how to attain this format ? I dont to have anything below the Section III, I dont want to use tho and I dont want to adjust width padding etc, is there a way to achieve this ?

Does this answer your question? [How to turn off word wrapping in HTML?](https://stackoverflow.com/questions/4652654/how-to-turn-off-word-wrapping-in-html) — Mahbub Moon, Dec 11 '19 at 04:19
Yes , unfortunately I dont know the term to search while having this problem — Leroy, Dec 11 '19 at 04:38

score 7 · Accepted Answer · answered Dec 11 '19 at 04:05

Looks like the text breaks into multiple lines, which makes it look odd. I added the white-space: nowrap styling. You may also want to add some spacing between the two divs.

<h2>
  <div style="display:flex; white-space: nowrap;">
    <div>
      Section III :
    </div>
    <div>
      Very long parangrapgggggggggggggggggggggggggggggggggggggggggggggggggggggggg
    </div>
  </div>
</h2>

score 1 · Answer 2 · answered Dec 11 '19 at 04:12

1

try white-space:nowrap css from the div tag

answered Dec 11 '19 at 04:12

Nethra

519
2
8

score 0 · Answer 3 · answered Dec 11 '19 at 04:15

You have to apply display:flex to outer div and display: inline-block to inner divs

.myClass {
  display: inline-block;
  background-color: green;
}

.outerDiv {
  display: flex;
}

<h2>
  <div class="outerDiv">
    <div class="myClass">
      Section III :
    </div>
    <div class="myClass">
      Very long parangrapgggggggggggg
    </div>
  </div>
</h2>

How can I format this div without the text inside breaking a line?

3 Answers3