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

一、nobr语法

1
<nobr>内容</nobr>

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

二、nobr标签特点：

如不遇到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>标签用法代码示例的更多相关文章

  1. Web前端开发最佳实践（9）：CSS代码太太乱，重复代码太多？你需要精简CSS代码

    前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大 ...

  2. 《大巧不工 web前端设计修炼之道》学习笔记

    前端设计如同一个人的着装与外表,站点的设计总是最先吸引人们的眼球.布局是否合理.风格是否简介.配色是否和谐,流程是否通畅,操作是否便捷,这些前端特效都影响着用户对站点的认可度.随着用户体验,可用性,可 ...

  3. Web前端开发最佳实践（10）：JavaScript代码不好读，不好维护？你需要改变写代码的习惯

    前言 这篇文章本应该在上一篇文章:使用更严格的JavaScript编码方式,提高代码质量之前发布,但当时觉得这篇文章太过基础,也就作罢.后来咨询了一些初级的开发者,他们觉得有必要把这篇文章也放上来.尽 ...

  4. 大巧不工web前端设计修炼之道—笔记

      设计原则: 深入人心的设计--别让我思考 简洁是一种文化,一种需求,一种思想   ·排版 ·字体(衬线 | | 无衬线)

  5. web前端设计：JQuery MINI UI

    JQuery MINIUI 个人感觉用起来很爽,所以在此记录之,以后开发过程可能作为备选项.它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验.在线下载地 ...

  6. web前端设计最好用的工具

    一.FSCapture FastStone Capture(FSCapture)是经典好用的屏幕截图软件,还具有图像编辑和屏幕录制两大功能,可以捕捉全屏图像,或者活动窗口.窗口内的控件对象截图.支持手 ...

  7. Web前端开发最佳实践（12）：JavaScript代码中有大量写死的配置数据？这些数据难以维护，你需要合理组织这些数据

    前言 JavaScript代码基本上都是由业务逻辑和数据组成的,逻辑代码根据数据完成一定的操作.很多数据在代码中是写死的,比如一些URL.显示在界面上的提示信息.页面元素相关的样式值及其他使用到的固定 ...

  8. Android程序员学WEB前端(1)-HTML(1)-标准结构常用标签-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522043觉得博文有用,请点赞,请评论,请关注,谢谢!~ 8月份了,换工作有2个月了 ...

  9. Web前端开发基础 第二天（各类标签）

    认识标签(第二部分): <ul> <li>信息</li> <li>信息</li> ...... </ul> <ol> ...

随机推荐

  1. poj 1087 C - A Plug for UNIX 网络流最大流

    C - A Plug for UNIXTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contes ...

  2. Codeforces Gym 100286I iSharp 水题

    Problem I. iSharpTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/ ...

  3. 图的深度优先搜索算法DFS

    1.问题描写叙述与理解 深度优先搜索(Depth First Search.DFS)所遵循的策略.如同其名称所云.是在图中尽可能"更深"地进行搜索. 在深度优先搜索中,对最新发现的 ...

  4. Apache Httpd通过mod_jk连接多个Tomcat

    一个tomcat能够配置多个web apps,这是众所周知的.当更改了一个web app,想要又一次启动的时候.因为全部的web apps都是放在同一个tomcat下的,所以别的web apps也在重 ...

  5. iOS开发——设备篇Swift篇&判断设备类型

    判断设备类型   1,分割视图控制器(UISplitViewController) 在iPhone应用中,使用导航控制器由上一层界面进入下一层界面. 但iPad屏幕较大,通常使用SplitViewCo ...

  6. iOS开发——实用篇Swift篇&QQ登入界面实现

    QQ登入界面实现 我们知道在App Store中几乎所有软件都设计到账户的登入,而我们最常见的就是QQ,微信,在没有踏入程序员这条不归路之前,看到一个个的界面都感觉好高大上的样子. 在学习的过程中,自 ...

  7. iOS开发——UI篇OC篇&TextField作为搜索框的使用

    TextField作为搜索框的使用 在iOS开发中我们经常会使用到搜索框,但是有的时候系统自带的搜索框不足以满足我吗想要的功能,这个时候我们就可以使用自定义的搜索框实现想要的功能. 今天就简单的介绍一 ...

  8. MapReduce原理讲解

    简介 本文主要介绍MapReduce V2的基本原理, 也是笔者在学习MR的学习笔记整理. 本文首先大概介绍下MRV2的客户端跟服务器交互的两个协议, 然后着重介绍MRV2的核心模块MRAppMast ...

  9. java_log4j多文件配置

    今天配置了log4j中写多个文件的内容,配置了半天才搞出来,为了避免类似问题,写个博客吧. 首先说一下需求,每天要在7个文件夹中生成文件,文件格式为xxx.log.2000.01.01,自己开发个写文 ...

  10. 第三方框架FMDB

    摘要:关键点:创建.插入.查询.数据格式化 第三方框架FMDB -------------------------------------------------------------------- ...