在网页排版布局中比如文章列表标题排版，无论多少文字均不希望换行显示，需要强制在一行显示完内容。这就可以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. C语言根据日期取其位于一年中的第几天

    #include <iostream> #include <stdlib.h> using namespace std; bool isLeapYear( int iYear ...

  2. SASS优化响应式断点管理

    前端开发whqet,csdn,王海庆,whqet,前端开发专家 原文:<Managing Responsive Breakpoints with Sass> 作者:Hugo Giraude ...

  3. C++ 对象没有显式初始化

    C++ 对象没有显式初始化,结果是什么? 首先考虑非静态对象 1.方法内的局部对象: a.类类型:调用default构造方法 b.基本类型:值不确定 2.类中的数据成员: a.类类型:调用defaul ...

  4. PP常用T-CODE

    与BOM相关 CS00 BOM 菜单 BOM Menu CS01 生成物料 BOM Create Material BOM CS02 更改物料 BOM Change Material CS03 显示物 ...

  5. 纯Javascript实现Windows 8 Metro风格实现

    Metro风格设计主要特点 1.Windows 8 Metro风格设计,实现网站或系统功能的导航 2.纯Javascript实现 3.支持所有IE.360.Chrome等常用浏览器 4.支持圆角.阴影 ...

  6. [GIF] GIF Loop Coder Single Mode

    We'll take a look at Single Mode animations and strategies for making this type of animation smoothl ...

  7. JS 文本输入框放大镜效果

    JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...

  8. ABAP FIELD-SYMBOLS 有大作用- 将没有可改参数的增强出口变得也能改主程序的值了

    看下图代码: report  z_xul_test2 中 定义了 全局变量 G_DATA1 , 分别调用了 z_xul_tes1 中的 form  和 function zbapi_test , 这两 ...

  9. maven插件开发（二）

    因为很多jar都是在开发环境中,没有到仓库中,因此偷个懒,用命令直接自动安装到仓库去.在开发的过程中遇到一个比较诡异的问题,插件用命令调mvn 安装jar到仓库总是抛如下异常: maven Canno ...

  10. Android中常用适配器及定义自己的适配器

    转载:http://blog.chinaunix.net/uid-11898547-id-3303153.html http://www.tudou.com/home/_328390108/item ...