How to set p tag not to wrap in css

Css method to set the p tag not to wrap: Use the [display:inline] style to make the p tag not wrap. This attribute is used to define the type of display box generated by the element when creating the layout. The code is [p{display : inline;}].

The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer. This method is suitable for all brands of computers.

How to set the p tag not to wrap in css:

We use the display:inline style to make the p tag not to wrap.

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.

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 appears 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 The value marker existed in CSS, but was 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 is 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 is 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 is 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 display (similar to

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

  Example

  css code

  p{display: inline;}

  HTML code

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

  Rendering:

  

  Related tutorial recommendations: CSS video tutorial

  )

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

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