Home >Web Front-end >CSS Tutorial >How to set p tag not to wrap in css
How to set p tag not to wrap in css
- 青灯夜游Original
- 2021-01-27 18:29:2416559browse
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>Rendering:
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:
Rendering:
<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 ##For more programming-related knowledge, please visit:
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!