How do you inline multiple <p> elements in Bootstrap?

My current code:

    <div className="container d-inline-flex">
        <p className="text-nowrap">
          This is sentence number 1.
        </p>
        <p className="text-nowrap">
          This is sentence number 2, which is a bit longer. 
        </p>
        <p className="text-nowrap">
          This is sentence number 3 and is the longest sentence by far. 
        </p>
    </div>

The texts overflow the sidebar due to "text-nowrap". However, "text-wrap" would wrap the text to the next line of the <p> tag instead at the very beginning of the new line.

Can you resolve my scandalous, complacent effort?

Bonus: I am looking forward to bypass the default <p> behavior, where it ignores multiple blank spaces
Ie. <p> "hello_____neighbor" -> "hello neighbor"

CodePudding user response：

You haven't provided any CSS nor Bootstrap's version and this is very bad question.

However, you should know about display properties and there's two ways to achieve your wanted result, by CSS:

<style>
.text-nowrap{
display: inline!important;
}
</style>

<p >test</p>
<p >test</p>

Or by giving Bootstrap's class on HTML element:

<p > test </p>

Just to note: Display utility classes that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

As such, the classes are named using the format:

.d-{value} for xs
.d-{breakpoint}-{value} for sm, md, lg, and xl.

Where value is one of:

none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex

The media queries effect screen widths with the given breakpoint or larger. For example, .d-lg-none sets display: none; on both lg and xl screens.

As for whitespaces (to make it show) there are actually 3 ways of achieving it:

1. By adding   :
   • <p>There are two spaces between these&nbsp;&nbsp;words.</p>
2. By adding  :
   • <p>There are two spaces between these&ensp;words.</p>
3. By using <pre> </pre> - You just type stuff inside of tag and that's it.