How to set p tag not to wrap in css-CSS Tutorial-php.cn

How to set p tag not to wrap in css

青灯夜游

Release： 2021-01-28 09:20:02

Original

16517 people have browsed it

How to set the p tag not to wrap: use the display attribute and set the value of the display attribute in the p tag element to "inline" or "inline-block"; this will cause the p tag to be displayed as an inline element Or an inline block element. If there are no line breaks before and after the element, line breaks cannot occur.

The operating environment of this article: Acer S40-51, CSS3&&HTML5&&HBuilderX.3.0.5 version, Windows10 Home Chinese version

(Learning video sharing: css video tutorial)

HTML p tag

The p tag is a block-level element and will occupy its own line. By default, the p tag will wrap automatically.

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css设置p标签不换行</title>
		<style>
			p{
				background: pink;
			}
		</style>
	</head>
	<body>
		<p>测试文本。</p>
		<p>测试文本。</p>
		<!-- 
		p标签是块级元素，会独占一行
		默认情况下p标签会自动换行的
		 -->
	</body>
</html>

Copy after login

Rendering:

How to set p tag not to wrap in css

If we want the p tag not to wrap, let the two p tags be in the same How to set it up?

Set the p tag not to wrap

css You can set the "display:inline;" or "display:inline-block;" style for the p tag so that the p tag does not wrap. Line break.

Example:

How to set p tag not to wrap in css

Rendering:

How to set p tag not to wrap in css

<strong>display:inline ;</strong>

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.

Attribute value:

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, no line breaks before and after the element. (New value in CSS2.1)

Characteristics of inline elements:

Setting width and height is invalid
The margin setting is only valid in the left and right directions, not up and down; the padding setting is valid in both the up, down, left and right directions, which will expand the space.
will not be performed automatically. Line wrap

Characteristics of inline block elements:

##No automatic line wrap
Able to recognize width and height
The default arrangement is from left to right

Programming video

! !

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!