在网页排版布局中比如文章列表标题排版，无论多少文字均不希望换行显示，需要强制在一行显示完内容。这就可以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. python中objects的all和get方法的区别

    all返回的是QuerySet: get返回的是模型对象. 想要获取查询结果的字段值: 从QuerySet中获取对象可以通过for in的形式遍历,之后通过对象获取对象的具体值: get 返回的是对象 ...

  2. 在Android项目中使用AndroidAnnotations(配置框架,显示Hello World!)

    使用这个框架可以极大的简化在开发Android过程中的代码.提高开发的效率.这里简单说一下配置方式.和使用办法. 项目的地址为:AndroidAnnotations Jar包下载地址:3.0.1 下载 ...

  3. PL/pgSQL的RETURN QUERY例子

    我的例子: 数据准备: create table custinfo(custid integer,callingcnt integer); ,),(,),(,); 函数生成: CREATE OR RE ...

  4. ArcObjects SDK（AE）10.1在vs2012安装的方法

    ArcObjects SDK(以下简称AO)10.1只支持vs2010,如果装了vs2012,再安装AO会提示一串鸡肠(英文),意思是AO10.1只支持vs2010 想在2012下安装,可以通过修改注 ...

  5. thrift学习笔记

    Thrift学习笔记 一:thrift介绍 Thrift是facebook开发的用来处理各不同系统之间数据通讯的rpc服务框架,后来成为apche的开源项目.thrift支持多种程序语言,包括Java ...

  6. HTTP协议报文、工作原理及Java中的HTTP通信技术详解

    一.web及网络基础       1.HTTP的历史            1.1.HTTP的概念:                 HTTP(Hyper Text Transfer Protocol ...

  7. MySQL · 引擎特性 · InnoDB 事务子系统介绍

    http://mysql.taobao.org/monthly/2015/12/01/ 前言 在前面几期关于 InnoDB Redo 和 Undo 实现的铺垫后,本节我们从上层的角度来阐述 InnoD ...

  8. [Effective C++ --030]透彻了解inlining的里里外外

    引言  inline函数 在函数声明或定义中函数返回类型前加上关键字inline即把min()指定为内联. inline函数对编译器而言必须是可见的,以便它能够在调用点内展开该函数.与非inline函 ...

  9. 详解MYSQL数据库密码的加密方式及破解方法

    MYSQL加密方式:http://blog.csdn.net/listeningsea/article/details/8139641

  10. 小米2s使用Hexamob Recovery PRO恢复数据

    这东西对于手机来说, 真是神器啊 现在很多手机都是以MTP连接到电脑的, 所以在PC上是看不到盘符, 也就无法使用finaldata 之类的工具恢复了. 而像小米2S这样的手机, 无法外接SD卡, 则 ...