kanglecjr
- 浏览: 506595 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (310)
- PHP (46)
- Java (50)
- Perl (0)
- Bash (5)
- C# (9)
- JavaScript (5)
- InDesign (7)
- 百宝箱 (5)
- 排错 (3)
- 招聘 (5)
- PHP他山之石 (3)
- SQL(DML) (10)
- Flex (15)
- LAMP (1)
- DIV+CSS (1)
- C#2008 (4)
- LOGO (7)
- WorkLog (1)
- 工作 (26)
- Groovy (7)
- 海量数据 (4)
- C/C++ (1)
- Android (1)
- PYTHON (13)
- Java开发实战1200例 (1)
- Java枚举与泛型 (16)
- Java基础应用 (24)
- poj (3)
- Java数组与集合 (18)
- 疑难解析 (3)
- JavaWeb (8)
- Jython (2)
- 成功之路 (0)
- Golang (2)
- Spring (2)
- 微信小程序 (0)
最新评论
-
DawnBells：
...
java.util.concurrent 之六：使用Future类和Callable类 -
kanglecjr：
http://tieba.baidu.com/f?kz=101 ...
泰语字母好看的手写体 -
zxjlwt：
学习了。http://surenpi.com
java.util.concurrent 之六：使用Future类和Callable类 -
spring_springdata：
java jsoup开源框架demo使用实例教程源代码下载:h ...
JSOUP获取网页数据返回403错误（403 error loading URL,connection类） -
narochids：
MARK!
JavaScript+Ajax实例大全（1521例以上），可以随编辑随执行
网页对象内容自动换行控制方法
对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html
<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>
css
#wrap{white-space:normal; width:200px; }
1.（IE浏览器）连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行
#wrap{word-break:break-all; width:200px;}
或者
#wrap{word-wrap:break-word; width:200px;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果：可以实现换行
2.（Firefox浏览器）连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
#wrap{word-break:break-all; width:200px; overflow:auto;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果：容器正常，内容隐藏
对于table
1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>
效果：隐藏多余内容
2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果：可以换行
3. (IE浏览器)在td,th中嵌套div,p等采用上面提到的div,p的换行方法
4.(Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行，使用overflow:hidden;隐藏超出内容，这里overflow:auto;无法起作用
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
效果：隐藏多于内容
5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法
运行代码框
最后，这种现象出现的几率很小，但是不能排除网友的恶搞。
下面是提到的例子的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>字符换行</title>
<style type="text/css">
table,td,th,div { border:1px green solid;}
code { font-family:"Courier New", Courier, monospace;}
</style>
</head>
<body>
<h1><code>div</code></h1>
<h1><code>All white-space:normal;</code></h1>
<div style="white-space:normal; width:200px;">Wordwrap still occurs in a td element that has its WIDTH attribute set to a value smaller than the unwrapped content of the cell, even if the noWrap property is set to true. Therefore, the WIDTH attribute takes precedence over the noWrap property in this scenario</div>
<h1><code>IE word-wrap : break-word ;</code></h1>
<div style="word-wrap : break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE word-break:break-all;</code></h1>
<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1>
<div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>table</code></h1>
<h1><code>table-layout:fixed;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>table-layout:fixed; word-break : break-all; word-wrap : break-word ;</code></h1>
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>FF table-layout:fixed; overflow:hidden;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
</body>
</html>
来自：http://wenku.baidu.com/view/d05941d376eeaeaad1f330a1.html
对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html
<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>
css
#wrap{white-space:normal; width:200px; }
1.（IE浏览器）连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行
#wrap{word-break:break-all; width:200px;}
或者
#wrap{word-wrap:break-word; width:200px;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果：可以实现换行
2.（Firefox浏览器）连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
#wrap{word-break:break-all; width:200px; overflow:auto;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果：容器正常，内容隐藏
对于table
1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>
效果：隐藏多余内容
2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果：可以换行
3. (IE浏览器)在td,th中嵌套div,p等采用上面提到的div,p的换行方法
4.(Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行，使用overflow:hidden;隐藏超出内容，这里overflow:auto;无法起作用
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
效果：隐藏多于内容
5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法
运行代码框
最后，这种现象出现的几率很小，但是不能排除网友的恶搞。
下面是提到的例子的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>字符换行</title>
<style type="text/css">
table,td,th,div { border:1px green solid;}
code { font-family:"Courier New", Courier, monospace;}
</style>
</head>
<body>
<h1><code>div</code></h1>
<h1><code>All white-space:normal;</code></h1>
<div style="white-space:normal; width:200px;">Wordwrap still occurs in a td element that has its WIDTH attribute set to a value smaller than the unwrapped content of the cell, even if the noWrap property is set to true. Therefore, the WIDTH attribute takes precedence over the noWrap property in this scenario</div>
<h1><code>IE word-wrap : break-word ;</code></h1>
<div style="word-wrap : break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE word-break:break-all;</code></h1>
<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1>
<div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>table</code></h1>
<h1><code>table-layout:fixed;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>table-layout:fixed; word-break : break-all; word-wrap : break-word ;</code></h1>
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>FF table-layout:fixed; overflow:hidden;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
</body>
</html>
来自：http://wenku.baidu.com/view/d05941d376eeaeaad1f330a1.html
分享到：
发表评论
-
class and inheritance
2014-05-21 11:53 793class and inheritance class ... -
php获取远程图片并下载保存到本地
2014-05-16 06:02 1015/* *功能：php完美实现下载远程图片保存到本地 * ... -
睡（税）后工资
2014-05-15 06:16 715转载：http://www.oschina.net/code/ ... -
十进制转二进制
2014-05-10 23:31 783function dec2bin ($dec) { ... -
上海盛大 PHP工程师 面试题
2011-03-11 08:05 2350来源：http://www.iteye.com/topic/8 ... -
CSS之自动换行
2011-03-09 07:58 1132关键字：迅雷 Google Baidu ... -
块级元素和级联元素的含义
2011-03-09 07:56 1101Block element 块级元素 顾 ... -
text-indent无效的几个原因及解决方案
2011-03-09 07:52 3720text-indent是用来字符缩进的。我们通常用在段 ... -
CSS自动换行
2011-03-09 07:48 1189这样的一个表： <table width="1 ... -
[转]Html中添加.wmv视频文件-Windows Media Player
2011-02-14 22:47 1756From: http://hi.baidu.com/ny_ds ... -
MIME 类型大全
2011-02-08 23:17 1802From http://www.webmaster-toolk ... -
【翻译】Video Upload MIME types（视频上传MIME类型）
2011-02-08 08:10 1793From http://www.htmlforums.com/ ... -
重启 HTTPD WEB服务器
2011-02-08 07:59 2274第一次知道用 httpd 也可以做 PHP的服务器（估 ... -
【转】两种PHP上传文件大小限制解决方案
2011-02-08 07:52 1783From：http://www.soft6.com/t ... -
【翻译】PHP中 文字编码变换时 使用SJIS-win而非SJIS，使用eucJP-win而非EUC-JP
2011-02-02 07:57 2687使用SJIS-win而非SJIS，使用eucJP-win而非E ... -
【翻译】用PHP取得字符串的长度（strlen,mb_strlen）
2011-02-02 07:05 2117取得字符串的长度。 strlen int strlen( ... -
[转载]PHP操作oracle数据库指南
2011-01-28 08:14 1618From:http://www.pcppc.cn/bianch ... -
PHP100视频教程27：PHP模板引擎Smarty入门使用
2009-07-05 20:57 1617PHP100视频教程27：PHP模板引擎Smarty入门使用 ... -
PHP100视频教程26：制作自己的PHP+MYSQL的类
2009-07-05 17:38 15541、巩固学习常用MYSQL函数 2、使用类封装常用SQL操 ... -
PHP100视频教程16：PHP小偷程序原理和实例
2009-07-05 16:35 1712PHP100视频教程16：PHP小偷程序原理和实例 1、初识 ...
相关推荐
word-wrap属性用于长单词和URL地址的自动换行 1 font-size属性用于设置字号。 2 font-family属性用于设置字体。 3 font-weight属性用于定义字体的粗细。 4 font-style属性用于设置变体（字体变化）。 5 font属性用于...
--*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 能灵活使用 CSS排版 能力目标 学会使用 CSS制作电子相册 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 课堂小结 ...
超实用的jQuery代码段精选近350个jQuery代码段，涵盖页面开发中绝大多数要点、技巧与方法，堪称史上最实用的jQuery代码参考书，可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...
9.5 表格的宽度固定后内容自动换行 9.6 表格的排序 9.7 表格的斜线 9.8 table中的文字滚动 9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 ...
9.5 表格的宽度固定后内容自动换行 9.6 表格的排序 9.7 表格的斜线 9.8 table中的文字滚动 9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 ...
\ajaxmodel\src\bonze\AutoRefServlet.java 自动刷新网页的服务器端。 \ajaxmodel\src\bonze\ProcessServlet.java 显示进度条的服务器端。 第20章（\c20） 示例描述：学习JSON并介绍Ajax与JSON。 20.1....
63、IE与火狐获取标签的文本内容方法 338 64、JS自动检测IFRAME内容高度并自动设置为IFRAME高度 338 65、JS MOVETO设置屏幕滚动到最底端或者最顶端 339 66、JS OBJECT方式设置浏览器最大化与最小化 339 67、边框标签...
Java开发技术大全 电子版 第1篇Java基础知识入门. 第1章Java的开发运行环境2 1.1Java的运行环境与...14.13.15“自动换行”菜单的响应代码570 14.13.16“查找…”菜单的响应代码570 14.13.17“设置字体…”菜单...
01053利用CentimetersToPoints方法将计量单位从cm转换为磅 01054利用InchesToPoints方法将计量单位从in转换为磅 01055显示Excel内置对话框 01056显示常用的Excel内置对话框 01057获取Excel菜单栏信息 01058获取Excel...
37、在Excel中实现自动换行 89 38、汉字输入法的若干诀窍 89 39、用Word2000对称页边距进行双面打印 89 40、Excel玩“转置” 89 41、Excel轻松排序 89 42、Word中实现表格标题重复 89 43、Excel中实现表格标题分页...
实例307 打印超长字符串自动换行 实例308 批量打印文档 实例309 实现横向打印 实例310 设置打印纸大小 实例311 获取打印纸的左边距和上边距 10.11 打印预览 实例312 修改文档/视图结构默认的打印预栏工具栏 ...
实例307 打印超长字符串自动换行 实例308 批量打印文档 实例309 实现横向打印 实例310 设置打印纸大小 实例311 获取打印纸的左边距和上边距 10.11 打印预览 实例312 修改文档/视图结构默认的打印预栏工具栏 ...
cc实例200 控制光驱的自动运行功能 7.4 游戏设置 cc实例201 设置“蜘蛛纸牌”游戏 cc实例202 修改“扫雷”游戏的设置 7.5 应用软件设置 cc实例203 设置Wordc2000文档及图片的保存路径 ...
cc实例200 控制光驱的自动运行功能 7.4 游戏设置 cc实例201 设置“蜘蛛纸牌”游戏 cc实例202 修改“扫雷”游戏的设置 7.5 应用软件设置 cc实例203 设置Wordc2000文档及图片的保存路径 ...
cc实例195 修改IE标题栏内容 cc实例196 隐藏IE浏览器的右键关联菜单 cc实例197 设置IE的默认主页 cc实例198 清空上网历史记录 7.3 文件控制 cc实例199 如何建立文件关联 cc实例200 控制光驱的自动运行...
JavaScript的RegExp对象和String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法. 在JavaScript中,正则表达式是由一个RegExp对象表示的.当然,可以使用一个RegExp()构造函数来创建RegExp...
System.out.print() 直接打印，不会自动换行 System.out.printf() 可插入带 % 的输入类型,前两种只可以插入转义符, 不能插入 % 的数据或字符串 在 printf 里面,输出有5个部分 %[argument_index$][flags][width][....