How to set p tag not to wrap in css?

The p tag is a block-level element and will occupy its own line. What if we want to set two p tags on the same line? Let's take a look at how to use css to set the p tag not to wrap.

By default, the p tag will automatically wrap. Let's take a look at how to use css to set the p tag not to wrap:

Example

p{display: inline;}

<p>aaa</p> 
<p>bbb</p>

We use the display:inline style to prevent the p tag from wrapping.

Display style introduction:

The display attribute specifies the type of box the element should generate.

This attribute is used to define the type of display box generated by the element when creating the layout. For document types such as HTML, using display carelessly can be dangerous, as it may violate the display hierarchy already defined in HTML. For XML, since XML doesn't have this kind of hierarchy built in, all display is absolutely necessary.

Property value:

none This element will not be displayed.

block This element will be displayed as a block-level element with line breaks before and after this element.

inline default. This element will be displayed as an inline element with no line breaks before or after the element.

inline-block Inline block element. (New value in CSS2.1)

list-item This element will be displayed as a list.

run-in This element will appear as a block-level element or an inline element, depending on the context.

compact There was a value compact in CSS, but it was removed from CSS2.1 due to lack of widespread support.

marker There was a value marker in CSS, but it was removed from CSS2.1 due to lack of widespread support.

table This element will be displayed as a block-level table (similar to <table>) with line breaks before and after the table.

inline-table This element will be displayed as an inline table (similar to <table>) without line breaks before and after the table.

table-row-group This element will be displayed as a group of one or more rows (similar to <tbody>).

table-header-group This element will be displayed as a group of one or more rows (similar to <thead>).

table-footer-group This element will be displayed as a group of one or more rows (similar to <tfoot>).

table-row This element will be displayed as a table row (similar to <tr>).

table-column-group This element will be displayed as a group of one or more columns (similar to <colgroup>).

table-column This element will be displayed as a column of cells (similar to <col>)

table-cell This element will be displayed as a table cell (similar to <td> and <th>)

table-caption This element will be displayed as a table title (similar to <caption>)

inherit specifies that the value of the display attribute should be inherited from the parent element.