css怎么设置p标签不换行-木庄网络博客

css怎么设置p标签不换行

2022-03-21 12:14:07 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者青灯夜游，侵删。

设置p标签不换行的方法：使用display属性，在p标签元素中设置display属性的值为“inline”或“inline-block”；这样可以使p标签被显示为内联元素或行内块元素，元素前后没有换行符，也就无法换行了。

本文操作环境：宏基S40-51、CSS3&&HTML5&&HBuilderX.3.0.5版、Windows10 家庭中文版

（学习视频分享：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>