首页 » 编程语言 » html » 正文

HTML元素nobr标签的使用方法及作用

html元素<nobr>标签是英文“No Baeak”的缩写,意思是“禁止换行”,有关该标签的使用方法及作用详解如下:

HTML<nobr>标签的定义

<nobr>标签是强制不换行,即禁止换行;

<nobr>属于双标签,禁止换行的文本必须放在<nobr>和</nobr>之间。

<nobr>标签定义的文本元素的宽度,在超过浏览器窗口宽度或超过父标签容器(比如p、div等)的宽度时,也不会换行,不管该本文文字有多长,只要没有遇见<br>标签,就会始终在一行中显示。

HTML<nobr>标签的语法

<nobr>标签必须包含在开始标签<nobr>和结束标签</nobr>之间,其书写格式如下:

<nobr>这是一段强制不换行的内容</nobr>

如果在<nobr>标签内,不遇到br换行标签,内容始终会在单独在一行内显示,如遇到br换行标签,内容将在加br标签的位置进行自动换行。

HTML<nobr>标签的用法

在默认情况下,当单行文本的长度超过了当前浏览器窗口宽度或容纳文本文字的父标签容器宽度时,是会默认换行的;为了在这两种情况下,不让单行文本换行,我们就需要使用<nobr>标签来禁止换行,可以使过长的文本始终保持单行显示;

使用<nobr>标签,可以让无论多长,字数多少,都可以单行显示在一条线上。

1、在文本长度超过浏览器窗口宽度时,使用<nobr>标签禁止换行

<nobr>这是一段文本长度超过浏览器宽度时,不换行的内容。</nobr>

以上代码在IE浏览器中显示效果如下:

2020-01-18_153041.png

从上图可知,文本长度超过了浏览器显示文本的宽度时,使用了<nobr>标签的文本始终单行显示在一条直线上,是不会换行的。

如果没有使用<nobr>标签,也没有<br>标签换行的话,浏览器就会在文本达到浏览器窗口宽度时进行换行处理,效果如下图所示:

2020-01-18_161223.png

2、在文本长度超过容纳它的父标签容器宽度时,使用<nobr>标签禁止换行:

下面,我们以<p>段落标签容器为例,设置它的宽度为200px,为了让大家看得更清楚,我们也设置p标签的背景为red(红色),演示代码如下:

<p style="width:200px;background:red; " >
<nobr>这是一段文本长度超过父元素容器宽度时,有nobr标签就不换行的内容.</nobr>
</p>

以上代码在IE浏览器中显示效果如下:

2020-01-18_163415.png

由上图可知,当<nobr>标签定义的文本长度超过了p标签容器的宽度(也就是上图中红色区域的宽度)时,文本是不会换行的,也就是始终只会单行显示在一条直线上。

<nobr>标签对应的CSS样式规则

由于<nobr>标签在html规范中,并未被采用,请尽量使用white-space: nowrap,代码演示如下:

<p style="white-space: nowrap;">
这一段内容超出浏览器窗口的宽度,就会始终显示在单行的一条线上。
</p>
<p style="width:200px;white-space: nowrap;background: #EB383B; ">
这二段内容超出父标签容器的宽度,就会始终显示在单行的一条线上。
</p>

以上两段代码在IE浏览器中显示效果如下:

2020-01-18_182608.png

注意事项:

如果被<nobr>标签定义的元素内容中也有<br>换行标签的话,浏览器会在有<br>标签的位置进行换行,而换行后的每行文本,依旧会按照<nobr>标签规则单行显示在一条线上;也就是说,<br>标签在<nobr>标签内也可以进行换行。



欢迎您发表评论或留言