How to set css p tag not to wrap

css How to set p tags without line breaks: First create an HTML sample file; then define some p tags; finally add the css style to the p tags as "p{display: inline;}" to achieve no line breaks Just display it.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

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 wrap automatically. Let’s take a look at how to use css to set the p tag not to wrap:

Example

css code

p{display: inline;}

HTML code

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

Rendering:

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

Display style introduction:

The display attribute specifies the type of box that 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.

[Learning video sharing: css video tutorial]

Attribute 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 is a value marker in CSS, but it has been removed from CSS2.1 due to lack of widespread support.

table This element will be displayed as a block-level table (similar to

), with line breaks before and after the table.

inline-table This element will be displayed as an inline table (similar to

), with no 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

).

table-header-group This element is displayed as a group of one or more rows (similar to

).

table-footer-group This element will be displayed as a group of one or more rows (similar to

).

table-row This element will be displayed as a table row (similar to

).

table-column-group This element will be displayed as a group of one or more columns (similar to

).

table-column This element will be displayed as a column of cells (similar to

)

table-cell This element will be displayed as a table cell (similar to

)

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

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

The above is the detailed content of How to set css p tag not to wrap. For more information, please follow other related articles on the PHP Chinese website!