在网页排版布局中比如文章列表标题排版，无论多少文字均不希望换行显示，需要强制在一行显示完内容。这就可以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. hibernate中session，HQL，持久化，一对多，多对一

    package com.hanqi.test; import java.util.Date; import java.util.List; import org.hibernate.Query; im ...

  2. CSS关键字

    1.initial initial 关键字用于设置 CSS 属性为它的默认值. initial 关键字可用于任何 HTML 元素上的任何 CSS 属性. 版本: CSS3 JavaScript 语法: ...

  3. Thinkphp框架 -- ajax无刷新上传图片

    用Thinkphp框架做无刷新上传图片 视图层 View <!doctype html> <html lang="en"> <head> < ...

  4. 基础数据结构 之 栈（python实现）

    栈是编程开发中的两种较为简单的数据结构.栈和队可用于模拟函数的递归.栈的特点是后进先出.其常用操作包括:出栈,入栈等.在出栈前,需判断栈是否为空.在入栈时,需判断栈是否已满. 下面给出一个用pytho ...

  5. Webserver推送技术

    server推送(Server Push) 推送技术的基础思想是将浏览器主动查询信息改为server主动发送信息.server发送一批数据,浏览器显示这些数据,同一时候保证与server的连接.当se ...

  6. C++ 析构方法

    1.什么是析构方法? 析构方法与构造方法互补. 2.为什么设计析构方法? 构造方法创建一个对象,对象内部往往还会申请一些资源.设计析构方法的目的是 释放资源,同时销毁自身. 3.析构方法可以认为分为两 ...

  7. libIconv.lib编码库的生成和使用

    iconv是将一种编码格式转换为另一种编码格式的开源库,例如可以把Windows环境下通用的ASCii(中文是GB2312)编码转换为国际通用的Unicode编码 iconv最新版本只支持MingW和 ...

  8. ext_EditorGridPanel （8）

    EditorGridPanel ExtJS 中的可编辑表格由类Ext.grid.EditorGridPanel 表示,xtype 为editorgrid,和gridPanel的区别就是,这个表格中的内 ...

  9. 将Uploads文件夹移到其它地方

    1.在创建目录 cd /mnt/xvdb mkdir qingtong 2.复制目录和权限 cp -rp /Uploads/ ./ -r 包括目录 p权限 3.创建软链接 ln -s /mnt/xvd ...

  10. AngularJS - contorller app module

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...