- 浏览: 410441 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (174)
- ajax (2)
- java (4)
- spring (0)
- eclipse (0)
- ejb (0)
- hibernate (2)
- jsf (1)
- c# (13)
- sqlserver (12)
- oracle (1)
- ibatis (3)
- appfuse (0)
- seam (0)
- log4j (0)
- Java2Html (0)
- javascript && html && css (38)
- 英语学习 (1)
- jag (2)
- guice (0)
- warp (0)
- facelets (1)
- struts (0)
- 资源汇聚 (4)
- 打印 (2)
- 热点文章收藏 (2)
- aop/aop.net (3)
- 代码生成器 (1)
- 数据库 (1)
- 开发工具集 (1)
- Erlang (1)
- web services (1)
- acegi (2)
- 存储过程集汇 (1)
- 黑客攻防 (2)
- C/C++ (6)
- wap (1)
- 缓存 分布式 (0)
- 企业库 (3)
- 搜索引擎:Lucene (0)
- 数据安全 (1)
- uml (1)
- 项目管理 (3)
- asp (1)
- SWT/JFACE (3)
- 面试与技巧 (1)
- 程序人生 (1)
- java rcp (2)
- 软件测试 (4)
- 不同应用服务器整合 (1)
- 数据仓库 (2)
- 求职/离职 (1)
- 网站珍藏 (1)
- visual studio 插件 (2)
- IT那些事 (1)
- linux/unix (10)
- windows (1)
- javaMail (1)
- common mail (1)
- tomcat (1)
- java并发/并行 (3)
- emacs (5)
- zookeeper (1)
- hadoop (7)
- 自动运维部署 (8)
- 业界资讯 (1)
最新评论
-
ffshow2006:
有一个有毒啊
两款Access密码破解器 -
nicepulse:
太好了,正好最近我也遇到这类的问题,代理不大正常,刚开始就是重 ...
SQL Server Agent 执行SSIS失败解决方案 -
supersnake:
这个比较喜欢
5款纯div+css制作的弹出菜单(标准且无js) -
cloudgamer:
我也写过一个提示效果
javascript tooltip (网页的提示效果) -
kuchaguangjie:
顶1个,哈哈
获取页面请求参数的JS脚本
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法
对于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>
发表评论
-
有关滚动条Scroll样式的设置
2008-08-07 17:02 31001.overflow内容溢出时的设置(设定被设定对象是否显示滚 ... -
两个文件改变网站流量
2008-08-01 14:49 927用两个文件,用js 改变网站流量 url_1.html 代 ... -
div 超出的文字以省略号显示
2008-07-24 21:36 1741div { overflow:hidden; ... -
css中如何使div居中(垂直水平居中)
2008-07-16 11:48 3836css中如何使div居中(垂直水平居中) 2007-01-12 ... -
DivCSS布局实例 用dl dt dd来制作列表
2008-07-16 09:03 1335今天有人发邮件问的一个问题,最开始的想法是用ul列表来实现;但 ... -
CSS在页面布局中实现div垂直居中的方法总结
2008-07-16 08:56 2526CSS在页面布局中实现div垂直居中的方法总结 2008年07 ... -
网页颜色搭配精选十例
2008-07-10 03:43 2900颜色的使用在网页制作 ... -
网页制作傻瓜工具集锦
2008-07-10 03:42 1800初学网页制作时,往往觉 ... -
五彩缤纷建网页(5)网页色彩配色软件
2008-07-10 03:39 10111.ColorWiz (国外) 超媒体置标语言(HTML) ... -
不间断连续图片滚动效果的制作方法
2008-07-10 03:35 2887以前我们站点也介绍过 ... -
图片的连续滚动
2008-07-10 03:28 770<html><head></he ... -
HTML各个元素对搜索引擎的权重比例
2008-07-09 13:10 798HTML各个元素对搜索引擎 ... -
css教程–十步学会用css建站(全)
2008-07-03 12:57 1384css教程–十步学会用css建站(全) 关键字: css教程 ... -
div 、ul、li 动态生成table (2)
2008-06-24 16:49 1581/// <summary> /// ... -
div 、ul、li 动态生成table
2008-06-18 13:45 2294public string GenerateTable(int ... -
5款纯div+css制作的弹出菜单(标准且无js)
2008-06-16 13:01 18425款纯div+css制作的弹出菜单(标准且无js) 一、最 ... -
Js字符串操作函数大全
2008-06-11 15:59 9057Js字符串操作函数大全 Js字符串操作函数大全 /***** ... -
JS实现局部打印和预览
2008-05-27 13:59 6188JS实现局部打印和预览: 第一种: JS 实现简单的页面局部 ... -
前台开发使用工具集合
2008-05-09 08:45 3789前台开发使用工具集合 1。 Fiddler一个很强大 ... -
获取页面请求参数的JS脚本
2008-04-17 13:11 3530//获取指定请求参数的值function getParamet ...
相关推荐
DIV CSS 图片自动换行 图片带鼠标效果
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-...
对于div,p等块级元素想必大家并不陌生吧,下面本文为以示例代码方式为大家介绍下使用css如何实现自动换行
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼。下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的...
“dddddddddddddddddddddddddddddddddddddddddddddddddd”,错误的评论,在显示评论列表的时候因为有固定宽,但是显示的内容超出的了div的宽,在这种情况下我们需要添加css为: 复制代码代码如下: word-wrap:break-...
对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行: html <div id=wrap>正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:...
我们使用了html2canvas库将id为text的div元素转换为canvas元素,并将canvas元素转换为...同时,我们使用了CSS样式控制文字的换行。最后,我们在页面上添加了一个按钮,点击按钮即可将文字转换为图片并显示在页面上。
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html <div id=wrap>正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div> css #...
大家都知道连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,下面是 CSS如何将他们换行的方法! 对于div 1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。 #wrap{...
但是,如果输入的是英文字母,那么,无论你div设定宽度为多少,英文字母都是不换行直接在同一行输出,导致div的宽度远远...div中英文自动换行 复制代码代码如下: <div style=”word-break:break-all;width:20px
对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html< id>正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义<...
用CSS实现Table单元格数据自动换行或不换行的实现方法: 1、强制换行: <style type=text/css>.AutoNewline{ word-break: break-all;/*必须*/}</style><table><tr> 自动换行自动换行自动换行自动...
1、强制不换行,同时以省略号结尾。 复制代码代码如下: <div xss=removed> 你好朋友朋友朋友我为什么不能看到效果啊 </div> 2、css自动换行 ...若是div嵌套,要使内层div根据内容自动换行,则可只设置外层的
昨天在使用css结合div布局的时候碰到了一个问题。 在一个规定宽度大小的ul里边 我把li的宽度定义为自动。企图让li根据内容长度来自动向左对齐排列。
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-...
在进行DivCSS布局时,需要对文本进行控制,我们在jb51.net以前的文章中,也讲过这方面的知识,今天系统的向大家介绍一下。CSS中控制换行的四种属性。 一、white-space 可以实现HTML中PRE标签的效果,以及单元格的...
如果你的div设置了固定的width和height,有时会出现文字不能自动换行的情况 查过相关资料后才知道,只有英文文本才会出现不能自动换行的情况,(中文不存在)而原因是因为英文文本之间没有加空格,浏览器会认为这是...