- 浏览: 783041 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (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 8921. 检查HTML元素是否有拼 ... -
常用代码
2009-12-21 16:52 9101.IFRAM自动高度调用 //加入当前页 <ifram ... -
常用js函数
2009-12-15 10:58 11011 父子页面的值传递 两种方式: 1)在父页面可以 ... -
CSS下拉菜单
2009-11-11 11:57 1053<!DOCTYPE html PUBLIC " ... -
鼠标点按钮,把文本框里的值输入到表格,表格美化
2009-11-06 12:49 1139效果图:往文本框内输入文字,按按钮可以把文本框内的文字输入到上 ... -
可以拖动的表格
2009-11-06 12:46 965效果图:可以用鼠标拖动两个框到页面的任意位置 <html ... -
手动在页面添加值到下拉列表而不刷新的demo
2009-11-06 12:38 1073手动在页面添加值到下拉列表而不刷新的demo 在一个页面中有 ... -
javascript 参数传递 文本框
2009-11-06 12:25 2123javascript 参数传递 文本框 一,最简单的就是同一 ... -
js设置页面背景色,设置背景图片
2009-11-05 16:22 4988<!DOCTYPE HTML PUBLIC " ... -
css 表格 table
2009-11-05 16:17 588css 表格 table table{ border-c ... -
禁止网页上的鼠标,键盘事件
2009-11-05 12:32 925禁止鼠标右键 oncontextmenu='return fa ... -
JavaScript 函数
2009-11-04 15:52 757虽然 JavaScript 有很多用 ... -
在html文件引入其它html文件的几种方法
2009-11-04 15:49 875简介:在论坛中常常有网友问到,可以在一个html的文件当中读取 ... -
div浮动在select上
2009-11-04 15:47 1282<html> <head> <m ... -
GIF进度条
2009-10-30 10:21 1684刚才看到javaeye的一个兄弟收集的进度条,很棒,所以收藏下 ... -
http错误代码含义
2009-10-28 12:34 1747<PRE class=java name="c ... -
Window.Open详解
2009-10-21 11:04 707Window.Open详解 一、window.open() ... -
javascript调用父窗口(父页面)的方法
2009-10-21 10:56 1753javascript调用父窗口(父页面)的方法 window. ... -
js窗口&提示大全
2009-10-21 10:52 645//-----------按钮提示框--- ... -
window.open,自动打开新窗口并且自动关闭新窗口,可以作为增加点击率使用
2009-10-21 10:44 1908<HTML> <HEAD> & ...
相关推荐
在环境认知部分,黄行提到了当前的社会环境,大学生就业竞争激烈,经济形势带来的企业招聘压力增大。人文环境上,大学生数量增加,使得人才市场饱和,找到符合个人特质和兴趣的工作变得更具挑战性。 在职业选择阶段...
ta_lib-0.5.1-cp312-cp312-win32.whl
课程设计 在线实时的斗兽棋游戏,时间赶,粗暴的使用jQuery + websoket 实现实时H5对战游戏 + java.zip课程设计
ta_lib-0.5.1-cp310-cp310-win_amd64.whl
基于springboot+vue物流系统源码数据库文档.zip
GEE训练教程——Landsat5、8和Sentinel-2、DEM和各2哦想指数下载
知识图谱
333498005787635解决keil下载失败的文件.zip
【微信机器人原理与实现】 微信机器人是通过模拟微信客户端的行为,自动处理消息、发送消息的程序。在Python中实现微信机器人的主要库是WeChatBot,它提供了丰富的接口,允许开发者方便地进行微信消息的接收与发送。这个项目标题中的"基于python实现的微信机器人源码"指的是使用Python编程语言编写的微信机器人程序。 1. **Python基础**:Python是一种高级编程语言,以其简洁的语法和强大的功能深受开发者喜爱。在实现微信机器人时,你需要熟悉Python的基本语法、数据类型、函数、类以及异常处理等概念。 2. **微信API与WeChatBot库**:微信为开发者提供了微信公共平台和微信开放平台,可以获取到必要的API来实现机器人功能。WeChatBot库是Python中一个用于微信开发的第三方库,它封装了微信的API,简化了消息处理的流程。使用WeChatBot,开发者可以快速搭建起一个微信机器人。 3. **微信OAuth2.0授权**:为了能够接入微信,首先需要通过OAuth2.0协议获取用户的授权。用户授权后,机器人可以获取到微信用户的身份信息,从而进行
基于springboot实验室研究生信息管理系统源码数据库文档.zip
张力控制,色标跟踪,多轴同步,电子凸轮,横切等工艺控制案例。
在Python编程环境中,处理Microsoft Word文档是一项常见的任务。Python提供了几个库来实现这一目标,如`python-docx`,它可以让我们创建、修改和操作.docx文件。本教程将重点介绍如何利用Python进行Word文档的合并、格式转换以及转换为PDF。 1. **合并Word文档(merge4docx)** 合并多个Word文档是一项实用的功能,特别是在处理大量报告或文档集合时。在Python中,可以使用`python-docx`库实现。我们需要导入`docx`模块,然后读取每个文档并将其内容插入到主文档中。以下是一个基本示例: ```python from docx import Document def merge4docx(file_list, output_file): main_doc = Document() for file in file_list: doc = Document(file) for paragraph in doc.paragraphs: main_doc.add_paragraph(paragraph.text) m
基于springboot+Javaweb的二手图书交易系统源码数据库文档.zip
基于springboot餐品美食论坛源码数据库文档.zip
基于springboot亚运会志愿者管理系统源码数据库文档.zip
使用WPF的数据样式绑定,切换对象数据值来完成控件动态切换背景渐变动画效果。 使用动画样式渲染比线程修改性能消耗更低更稳定
基于SpringBoot的企业客源关系管理系统源码数据库文档.zip
基于springboot+vue的桂林旅游网站系统源码数据库文档.zip
基于springboot嗨玩旅游网站源码数据库文档.zip
基于springboot的流浪动物管理系统源码数据库文档.zip