- 浏览: 780842 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (573)
- Java基础 (76)
- C++基础 (5)
- hibernate (5)
- struts (4)
- spring (1)
- webservice (7)
- AjaX基础 (0)
- JS脚本 (53)
- 正则表达式 (5)
- html脚本 (30)
- 数据库基础 (54)
- 工作相关 (49)
- 其他 (30)
- Linux (9)
- web服务器 (17)
- JSP (13)
- eclipse (6)
- 面试题相关 (20)
- XML (3)
- Apache common (2)
- 生活 (35)
- VMware (1)
- log4j (9)
- BeanUtils (2)
- 设计模式 (3)
- UML (1)
- UNIX (1)
- ibats (5)
- GT-Grid (17)
- ABAP学习 (17)
- ABAP (35)
- ABAP--ALV (11)
- ABAP--WEBDIMPRO (0)
- abap-sample (1)
- BEMS (2)
- flex (33)
- GIS技术 (3)
最新评论
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法
对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html
Html代码
<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>
<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>
css
Html代码
#wrap{white-space:normal; width:200px; }
#wrap{white-space:normal; width:200px; }
1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行
Html代码
#wrap{word-break:break-all; width:200px;}
#wrap{word-break:break-all; width:200px;}
或者
Html代码
#wrap{word-wrap:break-word; width:200px;}
#wrap{word-wrap:break-word; width:200px;}
Html代码
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果:可以实现换行
2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
Html代码
#wrap{word-break:break-all; width:200px; overflow:auto;}
#wrap{word-break:break-all; width:200px; overflow:auto;}
Html代码
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果:容器正常,内容隐藏
对于table
1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏
Html代码
<table style="table-layout:fixed" width="200">
<tr><td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td></tr>
</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 ;换行
Html代码
<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>
<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;无法起作用
Html代码
<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>
<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的方法
运行代码框
最后,这种现象出现的几率很小,但是不能排除网友的恶搞。
对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html
Html代码
<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>
<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>
css
Html代码
#wrap{white-space:normal; width:200px; }
#wrap{white-space:normal; width:200px; }
1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行
Html代码
#wrap{word-break:break-all; width:200px;}
#wrap{word-break:break-all; width:200px;}
或者
Html代码
#wrap{word-wrap:break-word; width:200px;}
#wrap{word-wrap:break-word; width:200px;}
Html代码
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果:可以实现换行
2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
Html代码
#wrap{word-break:break-all; width:200px; overflow:auto;}
#wrap{word-break:break-all; width:200px; overflow:auto;}
Html代码
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果:容器正常,内容隐藏
对于table
1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏
Html代码
<table style="table-layout:fixed" width="200">
<tr><td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td></tr>
</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 ;换行
Html代码
<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>
<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;无法起作用
Html代码
<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>
<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的方法
运行代码框
最后,这种现象出现的几率很小,但是不能排除网友的恶搞。
- test.rar (862 Bytes)
- 下载次数: 2
发表评论
-
10个 DIV+CSS 需要注意的问题
2010-01-11 16:34 8861. 检查HTML元素是否有拼 ... -
常用代码
2009-12-21 16:52 9001.IFRAM自动高度调用 //加入当前页 <ifram ... -
常用js函数
2009-12-15 10:58 10981 父子页面的值传递 两种方式: 1)在父页面可以 ... -
CSS下拉菜单
2009-11-11 11:57 1050<!DOCTYPE html PUBLIC " ... -
鼠标点按钮,把文本框里的值输入到表格,表格美化
2009-11-06 12:49 1138效果图:往文本框内输入文字,按按钮可以把文本框内的文字输入到上 ... -
可以拖动的表格
2009-11-06 12:46 961效果图:可以用鼠标拖动两个框到页面的任意位置 <html ... -
手动在页面添加值到下拉列表而不刷新的demo
2009-11-06 12:38 1071手动在页面添加值到下拉列表而不刷新的demo 在一个页面中有 ... -
javascript 参数传递 文本框
2009-11-06 12:25 2120javascript 参数传递 文本框 一,最简单的就是同一 ... -
js设置页面背景色,设置背景图片
2009-11-05 16:22 4983<!DOCTYPE HTML PUBLIC " ... -
css 表格 table
2009-11-05 16:17 586css 表格 table table{ border-c ... -
禁止网页上的鼠标,键盘事件
2009-11-05 12:32 922禁止鼠标右键 oncontextmenu='return fa ... -
JavaScript 函数
2009-11-04 15:52 755虽然 JavaScript 有很多用 ... -
在html文件引入其它html文件的几种方法
2009-11-04 15:49 871简介:在论坛中常常有网友问到,可以在一个html的文件当中读取 ... -
div浮动在select上
2009-11-04 15:47 1277<html> <head> <m ... -
GIF进度条
2009-10-30 10:21 1681刚才看到javaeye的一个兄弟收集的进度条,很棒,所以收藏下 ... -
http错误代码含义
2009-10-28 12:34 1739<PRE class=java name="c ... -
Window.Open详解
2009-10-21 11:04 706Window.Open详解 一、window.open() ... -
javascript调用父窗口(父页面)的方法
2009-10-21 10:56 1750javascript调用父窗口(父页面)的方法 window. ... -
js窗口&提示大全
2009-10-21 10:52 643//-----------按钮提示框--- ... -
window.open,自动打开新窗口并且自动关闭新窗口,可以作为增加点击率使用
2009-10-21 10:44 1906<HTML> <HEAD> & ...
相关推荐
在环境认知部分,黄行提到了当前的社会环境,大学生就业竞争激烈,经济形势带来的企业招聘压力增大。人文环境上,大学生数量增加,使得人才市场饱和,找到符合个人特质和兴趣的工作变得更具挑战性。 在职业选择阶段...
基于java的贝儿米幼儿教育管理系统答辩PPT.pptx
本压缩包资源说明,你现在往下拉可以看到压缩包内容目录 我是批量上传的基于SpringBoot+Vue的项目,所以描述都一样;有源码有数据库脚本,系统都是测试过可运行的,看文件名即可区分项目~ |Java|SpringBoot|Vue|前后端分离| 开发语言:Java 框架:SpringBoot,Vue JDK版本:JDK1.8 数据库:MySQL 5.7+(推荐5.7,8.0也可以) 数据库工具:Navicat 开发软件: idea/eclipse(推荐idea) Maven包:Maven3.3.9+ 系统环境:Windows/Mac
基于java的消防物资存储系统答辩PPT.pptx
项目经过测试均可完美运行! 环境说明: 开发语言:java jdk:jdk1.8 数据库:mysql 5.7+ 数据库工具:Navicat11+ 管理工具:maven 开发工具:idea/eclipse
项目经过测试均可完美运行! 环境说明: 开发语言:java jdk:jdk1.8 数据库:mysql 5.7+ 数据库工具:Navicat11+ 管理工具:maven 开发工具:idea/eclipse
TA_lib库(whl轮子),直接pip install安装即可,下载即用,非常方便,各个python版本对应的都有。 使用方法: 1、下载下来解压; 2、确保有python环境,命令行进入终端,cd到whl存放的目录,直接输入pip install TA_lib-xxxx.whl就可以安装,等待安装成功,即可使用! 优点:无需C++环境编译,下载即用,方便
使用软件自带的basic脚本编辑制作的脚本 低版本软件无法输出Excel报告,可以通过脚本方式实现这一功能
基于java的就业信息管理系统答辩PPT.pptx
25法理学背诵逻辑.apk.1g
基于java的大学生校园兼职系统答辩PPT.pptx
做到代码,和分析的源数据
本压缩包资源说明,你现在往下拉可以看到压缩包内容目录 我是批量上传的基于SpringBoot+Vue的项目,所以描述都一样;有源码有数据库脚本,系统都是测试过可运行的,看文件名即可区分项目~ |Java|SpringBoot|Vue|前后端分离| 开发语言:Java 框架:SpringBoot,Vue JDK版本:JDK1.8 数据库:MySQL 5.7+(推荐5.7,8.0也可以) 数据库工具:Navicat 开发软件: idea/eclipse(推荐idea) Maven包:Maven3.3.9+ 系统环境:Windows/Mac
项目经过测试均可完美运行! 环境说明: 开发语言:java jdk:jdk1.8 数据库:mysql 5.7+ 数据库工具:Navicat11+ 管理工具:maven 开发工具:idea/eclipse
适用于ensp已经入门人群的学习,有一定难度
基于java的数码论坛系统设计与实现答辩PPT.pptx
tornado-6.4.1-cp38-abi3-macosx_10_9_universal2.whl
基于java的医院信管系统答辩PPT.pptx
项目经过测试均可完美运行! 环境说明: 开发语言:java jdk:jdk1.8 数据库:mysql 5.7+ 数据库工具:Navicat11+ 管理工具:maven 开发工具:idea/eclipse
tornado-4.2.tar.gz