word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行
它们的区别就在于:
1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单
词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),
下一行为tulation(conguatulation)的后端部分了。
2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,
如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。
3,word-break;break-all 支持版本:IE5以上 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文
本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。 WORD-WRAP:break-word 支持版本:
IE5.5以上 内容将在边界内换行。如果需要,词内换行( word-break )也将发生。表格自动换行,避免撑
开。 word-break : normal | break-all | keep-all 参数: normal : 依照亚洲语言和非亚洲语言的
文本规则,允许在字内换行 break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行
的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 keep-all : 与所有非亚洲语言的normal相
同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本 语法: word-wrap :
normal | break-word 参数: normal : 允许内容顶开指定的容器边界 break-word : 内容将在边界
内换行。如果需要,词内换行(word-break)也行发生说明:设置或检索当当前行超过指定容器的边界时
是否断开转行。
对应的脚本特性为wordWrap。请参阅我编写的其他书目。 语法: table-layout : auto | fixed 参数:
auto : 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来
。速度很慢 fixed : 固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽
度,单元格间距,列的宽度,而和表格内容无关说明:设置或检索表格的布局算法。对应的脚本特性为
tableLayout。
建议:word-break 用3C检测会显示问题的,导致百度快照也会出问题-这个属性OPERA FIREFOX 浏览器也
不支持 word-break属性可以用white-space:normal;来代替,这样在FireFox和IE下就都能正确换行,而
且要注意,单词间的空格不能用来代替,不然不能正确换行。
- 浏览: 951700 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (383)
- JSP 自定义标签实现 (1)
- JSP (2)
- javascript (161)
- JAVA (100)
- HTML (26)
- jQuery (11)
- J2EE (1)
- Log4J (1)
- HTML5 (6)
- DB2 (2)
- Spring (14)
- 浏览器兼容 (1)
- JavaMail (1)
- JAVA(转载) (1)
- freemarker (1)
- 项目管理 (1)
- 项目架构学习 (1)
- Oracle (11)
- 开源项目 (2)
- 网络编程 (4)
- C (1)
- C++ (0)
- Xpath (1)
- 待写 (10)
- JXL (1)
- XML (1)
- JNDI (2)
- POI (8)
- Struts2 (3)
- 异常解决方法 (1)
- Sql Server (2)
- windows (2)
- SqlServer (1)
- 前端 (1)
- 正则表达式 (2)
- 浏览器兼容问题 (2)
- 转载 (25)
- css (11)
- svn (5)
- 工程构建 (1)
- 好用的网站 (1)
- sql (3)
- chrome V8 (1)
- javacript 报表 (1)
- FusionCharts (1)
- eclipse (2)
- tomcat (4)
- hibernate (2)
- 硬件 (1)
- 杂烩 (1)
- Linux (1)
- ubuntu (1)
- 设计模式 (2)
- 缓存 (1)
- 数据库 (1)
- JVM (2)
- DOM4j (1)
- 其他 (1)
- JACOB (1)
- extjs (3)
- ligerUi (1)
- 在线HTML编辑器 (1)
- API (1)
- OpenOffice (1)
- webservice (1)
- json (1)
- 百度map (1)
- NodeJs (1)
- greeplum jdbc spring (1)
- easyui (1)
- hightchart (1)
- 游戏 (1)
- HttpClient (1)
- 正则 (1)
- canvas (4)
- HTML5,javascript,canvas (0)
最新评论
-
changelo:
缺少了秦皇岛市
中国省,市,区 json数据 -
yurui829:
解析配置行那等号前后有可能有空格,改为如下比较好:String ...
java 读取.ini配置文件工具类 -
贝塔ZQ:
poi生成excel文档,感觉蛮复杂的,可以试试用pageof ...
POI生成excel带下拉 -
langke93:
我发现greenplum 通过jdbc insert性能很差, ...
jdbc 配置连接greeplum数据,spring配置连接greeplum数据(简单配置学习) -
zhutulang:
哪有收邮件???
Spring 邮件接收发送实例
发表评论
-
详解css3使用border属性实现各种三角形及其他复杂图形的原理
2016-01-21 13:20 1046最近看到网上有很多用css3实现三角形及各种复杂图形的代码 ... -
javascript 汉字转拼音
2014-09-16 12:57 3061<html> <head> ... -
javascript 将HTML转为 word,pdf 等(ie)
2014-08-18 12:26 3715/** * @author wsf html转换工具 ... -
java HTML2PDF HTML2DOC THML2Image 后台屏幕截图
2014-08-15 11:22 1294网上找的,下载学习吧。 -
javascript操作Excel
2014-07-21 15:08 1364/* * 默认转换实现函数,如果需要其他功能,需自行扩展 ... -
javascript循环性能比较(转)
2014-06-27 09:33 1326var chars = '0123456789abcdef' ... -
去掉ie10 输入框右边的小叉号
2014-05-06 17:10 1410input::-ms-clear{display:none;} ... -
javascript ----- Promise模式
2014-04-24 13:45 840http://blog.segmentfault.com/am ... -
javascript base64编解码
2014-04-17 13:24 1124/** * @author wsf Base64 enc ... -
js+css美化select,简单易用代码少,可以自己控制样式
2013-11-21 15:03 644非常好用。 -
再谈IE的浏览器模式和文档模式
2013-11-13 13:04 512以前在 “IE8兼容视图(IE7 mode)与独立IE7的 ... -
用 javascript 判断 IE 版本号
2013-10-30 14:12 895今天一个项目中需要判断IE版本号,又因为 jQuery 2. ... -
2012-04-05 16:07 Ext列表展现--普通排序sortable--全局排序remoteSort(EXTJS 全局排序问题)
2013-08-30 15:53 2250关于Ext的排序问题, ... -
style、currentStyle、getComputedStyle区别介绍
2013-08-26 13:20 1030样式表有三种方式 内嵌样式(inline St ... -
JavaScript(JS)记住用户名和密码 (应该自己写个通用的组件)
2013-08-18 22:15 1436//coder:LinQifo 2007.11.5 & ... -
超强js博客值得学习!!!
2013-08-16 09:54 2154再读ecmascript 摘要: 这几天,又花了点 ... -
最牛 javascript 判断 IE 版本号方法
2013-08-12 13:50 880var _IE = (function(){ ... -
javascript导出excel(可以导出表格线)
2013-08-05 09:29 2285<html> <head> ... -
Javascript模块化编程(三):require.js的用法
2013-07-30 12:43 862这个系列的第一部分和 ... -
Javascript模块化编程(二):AMD规范
2013-07-30 12:42 943这个系列的第一部分介绍了 Javascript 模块的基本写 ...
相关推荐
在网页设计中,"DIV CSS 图片自动换行"是一个常见的布局技巧,它涉及到CSS(层叠样式表)中的盒模型、布局模式以及响应式设计。这个技术主要用于展示一组图片,使得图片能够在页面中自动适应并换行排列,同时还可以...
标题所提到的“可编辑并且能够自动换行的div”,实际上是在讨论如何创建一个具有文本编辑功能的 `div` 元素,并且在用户输入文字时能自动换行,保持其形状不变。这涉及到 HTML、CSS 以及可能的 JavaScript 技术。 ...
1.用标签实现不换行 复制代码代码如下: <div>Hello world!<nobr> Hello world!<nobr></div> ...4.如果是两个div,可使用float实现不换行 复制代码代码如下: <div class=”class1″>hello </div> <div cla
在工作中评论内容测试遇到评论着的评论内容为:“dddddddddddddddddddddddddddddddddddddddddddddddddd”,错误的评论,在显示评论列表的时候因为有固定宽,但是显示的内容超出的了div的宽,在这种情况下我们需要...
HTML 中表格 TD 内容自动换行 HTML 中让表格 TD 中的多余字体自动换行是前端开发中常见的问题。今天,我们将讨论如何使用 CSS 来控制 TD 中的换行。 强制不换行 在 IE 的 TD 中,如果我们没有指定宽度,使用 `...
当我们希望div在溢出时自动换行,而不是隐藏或显示滚动条,可以采用以下方法: - `display: flex`:使用弹性布局,通过设置`flex-wrap: wrap`可以让子元素在必要时换行。 - `white-space: nowrap` 和 `white-...
`break-word`值表示如果一个单词过长,则会在适当的位置(通常是单词内部)自动换行,避免内容溢出容器边界。 - **`word-break`**:此属性决定了当文本需要被断开时如何处理。`break-all`值表示在任何字符之间都...
标题“字体超过div范围自动换行”及描述“字体超过div范围自动换行”,明确指出了一种解决方案——利用CSS属性使文本在超出`div`容器范围时自动换行。下面将深入探讨这一主题,包括相关CSS属性的使用方法、应用场景...
"button自适应高度和自动换行"这个主题主要关注如何让按钮在不同屏幕尺寸和内容长度下保持良好的视觉效果。以下是对这个主题的详细解释: 一、自适应高度 1. CSS Flexbox:使用Flexbox布局模型可以轻松实现按钮的...
- **Break-word**:当内容超出容器边界时,文本会自动换行到下一行,并在必要时进行单词断行。这对于包含长单词或长字符串的英文文本特别有用。 ##### 2. `word-break` - **Normal**:这是默认值。它允许在单词内...
在网页设计中,表格的换行通常是由于表格内容过多,超过了容器(如div或浏览器窗口)的宽度,导致表格需要在视觉上分成多行显示。在JSP中,这可以通过CSS样式和HTML属性来控制。 【描述】提到的“Linux文档”可能是...
关于“多个 div 能不换行吗?”这个问题,实际上涉及到 CSS 的布局管理和元素的盒模型。让我们深入探讨一下如何让多个 `div` 元素在同一行内显示,并讨论如何使父容器自适应子元素的大小。 首先,我们要理解默认...
### CSS文字自动换行 #### 知识点一:CSS自动换行的原理与方法 在Web开发中,实现文本的自动换行是一项常见的需求。本文档主要介绍了如何利用CSS来实现不同浏览器环境下的自动换行功能,并特别关注了对老旧浏览器...
在`Android Flowlayout`中,当一行无法容纳更多的子视图时,它们会自动换行到下一行,类似于HTML中的`<div>`布局或者CSS的`display: flex`。这种布局方式使得开发者无需精确计算每个子视图的位置和大小,而是由...
一、关于flex布局我建议去看一下http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html这篇博客,我们主要用到flex布局的一个换行属性,它是flex-wrap: wrap,自动换行。 二、vue代码 (1)html部分: <div...
### 网页英文自动换行技术解析 #### 背景介绍 在网页设计与开发过程中,文本的排版是非常重要的一环。不同于中文文本,英文文本在默认情况下不会自动进行换行处理,这可能会导致长单词或URL超出显示区域而被截断...
`FlowLayout`是一个自定义布局,它扩展了Android原生的布局系统,提供了自动换行的功能,使得在一行内无法完全显示的组件能够自然地流到下一行,类似于HTML中的`<div>`布局或CSS的`display: flex`布局。这种布局模式...
同时,可以结合事件监听器来响应用户的操作,实时更新页面内容并实现自动换行。 6. **响应式设计**: 随着设备屏幕尺寸的多样化,动态添加标签时要考虑响应式设计,使内容在不同设备上都能正确显示。可以使用媒体...