Web前端设计:Html强制不换行标签用法代码示例

在一些页面开发中,除自己操作外,引起换行的情况一般有:

澳门新葡亰平台游戏网站 ,在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容。这就可以nobr标签来实现。它起到的作用与word-break:keep-all
是一样的。nobr 是 No Break
的缩写,意思是禁止换行。通常在浏览器上显示的文档会在到达浏览器的横幅底端时自动换行,但是如果文字被包含在<nobr>~</nobr>标签里的话,则不会换行。由www.169it.com搜集整理

Ex一.td标签里内容长度过长引起换行;

一、nobr语法

Ex二.div标签里内容有文本和图片引起换行;

1
<nobr>内容</nobr>

解决方法:

不换行内容放入<nobr>与</nobr>之间即可,此标签与css
white-space功能相同。

针对例子一用nobr/nobr标签把换行的内容全部包起来,可以解决问题;

二、nobr标签特点:

针对例子二用CSS样式white-space: nowrap;可以使图片和内容不换行,.

如不遇到br换行标签,内容在一行显示完,如遇到br换行标签,内容将在加br换行自动换行。

<nobr> 作为定义外观的标签,在 W3C
里未被采用。要用样式表来实现禁止换行的效果的话,请在 white-space 里指定
nowrap。nowrap使用示例如下:

1
2
3
<div style="white-space: nowrap;">
即使浏览器的横幅不够,这里也不会换行。
</div>

三、html nobr禁止内容换行代码示例

这里假如有4行文章标题列表,设置宽度为200px;css行高为22px;对4列的内容我们采用ul
li列表布局,其中2个对内容加<nobr>标签,一个li内容不加,另外一个li内容少与宽度能显示完。

1、完整html源代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nobr标签实例 www.169it.com</title>
<style>
ul{ border:1px solid #000; width:200px;}
li{ width:200px; line-height:22px}
</style>
</head>
<body>
<ul>
<li><nobr>第一排内容文字多加nobr标签测试内容</nobr></li>
<li><nobr>第二排内容文字多加nobr标签不能排下</nobr></li>
<li>第三排内容文字多没有加nobr标签</li>
<li>第四排 文字少能排下</li>
</ul>
</body>
</html>

示例代码2:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
.AutoNewline
{
  width:300px;
  border:1px solid red;
}
</style>
<table>
<tr>
<td class="AutoNewline"><nobr>自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换
行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自
动换行自动换行自动换行</nobr></td>
</tr>
</table>
  • 文章来源:Web前端设计:Html强制不换行<nobr>标签用法代码示例
You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图