ホームページ > 記事 > ウェブフロントエンド > CSSでpタグを折り返さないように設定する方法
CSSでpタグを折り返さないように設定する方法
- 青灯夜游オリジナル
- 2021-01-27 18:29:2416385ブラウズ
p タグをラップしないように設定する方法: 表示属性を使用し、p タグ要素の表示属性の値を「inline」または「inline-block」に設定します。これにより、p タグが発生します。インライン要素またはインラインブロック要素として表示する要素の前後に改行がない場合は改行できません。
この記事の動作環境: Acer S40-51、CSS3&&HTML5&&HBuilderX.3.0.5 版、Windows10 Home 中国語版
(学習ビデオ共有: css ビデオ チュートリアル)
HTML p タグ
p タグはブロックレベルの要素であり、独自の行を占めます。デフォルトでは、p タグは自動的に折り返されます。
例:
<!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>レンダリング:
p タグをラップしないようにするには、2 つの p タグを同じように設定するにはどうすればよいですか？
p タグをラップしないように設定します
css p タグに「display:inline;」または「display:inline-block;」スタイルを設定できますp タグが折り返されないように改行します。
例:
レンダリング:
<strong>display:inline ; </strong>
display 属性は、要素が生成するボックスのタイプを指定します。
この属性は、レイアウトの作成時に要素によって生成される表示ボックスのタイプを定義するために使用されます。 HTML などのドキュメント タイプの場合、表示を不用意に使用すると、HTML ですでに定義されている表示階層に違反する可能性があるため、危険です。 XML の場合、XML にはこの種の階層が組み込まれていないため、すべての表示が絶対に必要です。
属性値:
block この要素は、この要素の前後に改行を入れて、ブロック レベルの要素として表示されます。
インラインデフォルト。この要素は、要素の前後に改行のないインライン要素として表示されます。
inline-block インライン ブロック要素。要素の前後に改行はありません。 (CSS2.1の新しい値)
インライン要素の特性:
幅と高さの設定は無効です
- #左右方向のマージンの設定のみが有効で、上下の設定は有効ではありません。パディングの設定は上下左右の両方向に有効であり、拡張されます。
- 行の折り返しは自動的には実行されません。
##自動行折り返しなし
#幅と高さを認識できる
- ##デフォルトの配置は左から右です ##プログラミング関連の知識については、
- プログラミング ビデオ
をご覧ください。 ！
以上がCSSでpタグを折り返さないように設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。