css中如何设置p标签不换行

这篇文章将为大家详细讲解有关css中如何设置p标签不换行,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

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

<强> HTML页标签

p标签是块级元素,会独占一行。默认情况下p标签会自动换行的。

示例:

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　& lt; meta  charset=皍tf-8"祝辞 　　p & lt; title> css设置标签不换行& lt;/title> 　　& lt; style> 　　p { 　　背景:,粉色; 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; p>测试文本。;/p> 　　& lt; p>测试文本。;/p> 　　& lt; !,, 　　p标签是块级元素,会独占一行 　　默认情况下p标签会自动换行的 　　,——比; 　　& lt;/body> 　　& lt;/html>

效果图:

如果我们想要让p标签不换行,让两个p标签在同一行该如何设置呢?

<强>设置p标签不换行

css可以通过为p标签设置“显示:内联;”或“显示:inline-block;”样式使p标签不换行。

示例:

效果图:

<代码> <强>显示:内联;

显示属性规定元素应该生成的框的类型。

这个属性用于定义建立布局时元素生成的显示框类型。对于HTML等文档类型,如果使用显示不谨慎会很危险,因为可能违反HTML中已经定义的显示层次结构。对于XML,由于XML没有内置的这种层次结构,所有显示是绝对必要的。

属性值:

<李>

块此元素将显示为块级元素,此元素前后会带有换行符。

<李>

内联默认。此元素会被显示为内联元素,元素前后没有换行符。

<李>

inline-block行内块元素,元素前后没有换行符。(CSS2.1新增的值)

<强>内联元素的特征:

<李>

设置宽高无效

<李>

对保证金仅设置左右方向有效,上下无效;填充设置上下左右都有效,即会撑大空间

<李>

不会自动进行换行

<强>行内块元素的特征:

<李>

不自动换行

<李>

能够识别宽高

<李>

默认排列方式为从左到右

关于“css中如何设置p标签不换行”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。

css中如何设置p标签不换行