kanglecjr
- 浏览: 517411 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (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 829class and inheritance class ... -
php获取远程图片并下载保存到本地
2014-05-16 06:02 1048/* *功能：php完美实现下载远程图片保存到本地 * ... -
睡（税）后工资
2014-05-15 06:16 735转载：http://www.oschina.net/code/ ... -
十进制转二进制
2014-05-10 23:31 821function dec2bin ($dec) { ... -
上海盛大 PHP工程师 面试题
2011-03-11 08:05 2375来源：http://www.iteye.com/topic/8 ... -
CSS之自动换行
2011-03-09 07:58 1167关键字：迅雷 Google Baidu ... -
块级元素和级联元素的含义
2011-03-09 07:56 1122Block element 块级元素 顾 ... -
text-indent无效的几个原因及解决方案
2011-03-09 07:52 3790text-indent是用来字符缩进的。我们通常用在段 ... -
CSS自动换行
2011-03-09 07:48 1211这样的一个表： <table width="1 ... -
[转]Html中添加.wmv视频文件-Windows Media Player
2011-02-14 22:47 1788From: http://hi.baidu.com/ny_ds ... -
MIME 类型大全
2011-02-08 23:17 1826From http://www.webmaster-toolk ... -
【翻译】Video Upload MIME types（视频上传MIME类型）
2011-02-08 08:10 1829From http://www.htmlforums.com/ ... -
重启 HTTPD WEB服务器
2011-02-08 07:59 2303第一次知道用 httpd 也可以做 PHP的服务器（估 ... -
【转】两种PHP上传文件大小限制解决方案
2011-02-08 07:52 1805From：http://www.soft6.com/t ... -
【翻译】PHP中 文字编码变换时 使用SJIS-win而非SJIS，使用eucJP-win而非EUC-JP
2011-02-02 07:57 2707使用SJIS-win而非SJIS，使用eucJP-win而非E ... -
【翻译】用PHP取得字符串的长度（strlen,mb_strlen）
2011-02-02 07:05 2154取得字符串的长度。 strlen int strlen( ... -
[转载]PHP操作oracle数据库指南
2011-01-28 08:14 1655From:http://www.pcppc.cn/bianch ... -
PHP100视频教程27：PHP模板引擎Smarty入门使用
2009-07-05 20:57 1634PHP100视频教程27：PHP模板引擎Smarty入门使用 ... -
PHP100视频教程26：制作自己的PHP+MYSQL的类
2009-07-05 17:38 15821、巩固学习常用MYSQL函数 2、使用类封装常用SQL操 ... -
PHP100视频教程16：PHP小偷程序原理和实例
2009-07-05 16:35 1737PHP100视频教程16：PHP小偷程序原理和实例 1、初识 ...
相关推荐
`core-renderer.jar` 是一个专为此目的设计的Java库，它能够将HTML内容转换成PDF，并且针对中文字符提供自动换行功能，同时还能保留CSS样式，从而保持原始网页的视觉效果。 1. **HTML转PDF**: HTML是一种标记语言，...
其中，文本的换行管理是CSS中不可或缺的一部分，尤其是在DivCSS布局中，良好的换行控制可以使得网页内容更加整洁、易读。本文将系统地介绍CSS中用于控制换行的四种主要属性：`white-space`、`word-break`、`word-...
"仿京东淘宝动态添加单选按钮并自动换行"这个话题是关于如何创建一个类似电商平台的商品选项选择功能，用户可以根据需要动态地加载单选按钮，并且当单选按钮数量过多，无法在一行内展示时，它们能自动换行到下一行，...
本篇将详细解释如何利用CSS实现文本的越界省略号显示以及自动换行。 首先，我们来看如何实现越界省略号的效果。这个效果通常用于长文本在有限的容器内无法完全展示时，用省略号(...)来表示文本被截断。关键的CSS...
HTML5的Canvas元素提供了一种在网页中绘制图形的手段，它基于...通过上述方法，即使***s的宽度固定，我们也可以根据内容自动换行来适配文本的绘制，从而使得在Web页面中使用Canvas元素时能够更好地控制文本的显示效果。
5. **自动换行**：描述中提到的“自动换行”功能，是指在转换过程中，jar包能自动处理文本溢出，确保内容在PDF页面内适应性地换行。这对于多列布局或者长文本段落尤其重要。 6. **字体兼容**：HTML可以引用各种在线...
例如，通过获取元素的引用，如`document.getElementById`或`document.querySelector`，然后设置其`style`对象的`overflowWrap`属性，可以开启或关闭自动换行功能： ```javascript var element = document....
在深入探讨如何在ExtJS 4.0框架中实现Desktop桌面图标自动换行的功能之前，我们首先需要了解ExtJS框架的基本概念以及Desktop组件的作用。ExtJS是一个基于JavaScript的开源前端框架，它提供了一系列丰富的UI组件，使...
这使得列表项在容器宽度不足时自动换行到下一行。 在CSS中，`white-space`属性用于设置元素内空白字符的处理方式。它有三个值：`normal`（默认值，内容自动处理换行），`pre`（换行和其他空白字符都将受到保护，...
在网页设计中，创建一个li列表并实现文字强制不换行，当文字内容超过li元素的宽度时自动隐藏，并在末尾添加省略号，是一种常见的文本显示方式，尤其在新闻列表、文章摘要等场景下。这种效果可以通过CSS样式来实现，...
块级元素是指浏览器显示时在该元素的前后会自动换行，因此多个块级元素不会排在一行。行内元素则默认显示在一行内，只有在最右端才自动换行。 7. 盒子模型的案例 盒子模型的案例包括调整网页中的对齐方式、理解...
在网页开发过程中，我们经常会遇到这样一个需求：当用户在文本域（`textarea`）中输入文字时，文本域的高度能够根据输入内容的多少自动进行调整，以达到更好的用户体验效果。下面将详细介绍实现文本域自动适应高度的...
- **writeln()**: 向文档写入文本，并自动换行。 #### Window对象 `window`对象是JavaScript中最顶级的对象，它代表浏览器窗口。几乎所有的全局函数、变量和对象都是`window`对象的属性或方法。 ##### 属性 - **...
JSP（Java Server Pages）中的内置对象是一组由Web容器自动创建并提供给开发者直接使用的对象。这些对象是JSP语言的核心组成部分，它们简化了开发过程，无需通过`new`关键字实例化。在JSP中，内置对象分为几个主要...
综上所述，这一章的内容深入讲解了Dreamweaver中处理文本的各种技巧和方法，旨在帮助用户更好地创建和编辑网页文本，提升网页设计的专业性和用户体验。通过掌握这些知识，设计师可以更加自如地运用文本元素来构建...
3. **区断标记**：`<hr>`创建水平线，`size`、`width`和`color`分别调整其大小、宽度和颜色，` `用于换行，`<nobr>`阻止自动换行，`<p>`定义段落，`<center>`使内容居中。 4. **连结格式**：`<base>`设置页面...
【CSS 样式表优点】CSS 不可以用来在浏览器的客户端进行编程来控制浏览器对象操作，创建动态效果（A），这是 JavaScript 或其他客户端脚本语言的功能。 【应用类样式】使用 Class（B）代码，可以将类样式应用于一段...
37. **文字自动换行**：`word-wrap: break-word;` 和 `word-break: break-all;` 控制英文和中文字符的换行行为。 38. **透明IFRAME**：`<IFRAME src="1.htm" width=300 height=180 allowtransparency></iframe>` ...
在Web开发中，CSS和HTML是构建网页布局的基石。在处理文本元素时，我们经常使用标签来对特定的文本进行...在设计网页时，我们需要根据具体内容和布局需求，合理选择display属性值，从而达到最佳的视觉效果和用户体验。