html小技巧之td,div标签里内容不换行

在有个别页面开拓中,除自个儿操作外,引起换行的图景相符有:

在网页制版结构中诸如小说列表标题排版,无论多少文字均不期待换行彰显,要求压迫在一行呈现完内容。那就能够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>标签用法代码示例

发表评论

电子邮件地址不会被公开。 必填项已用*标注