一般情况下,元素拥有默认的white-space:normal(自动换行,PS:不换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空格的字符或字母或数字(常规数据应该不会有吧,但有些测试人员是会这样子做的),超过容器宽度时就会把容器撑大,不换行。 
解决方法(以IE,chrome,FF为测试浏览器):

  1. {
  2.   word-break:break-all; /*支持IE,chrome,FF不支持*/
  3.   word-wrap:break-word;/*支持IE,chrome,FF*/
  4. }

以下是对这两种方法的区别说明: 
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)也行发生说明:设置或检索当当前行超过指定容器的边界时是否断开转行。 
建议:word-break 用3C检测会显示问题的,导致百度快照也会出问题-这个属性OPERA FIREFOX 浏览器也不支持 word-break属性可以用white-space:normal;来代替,这样在FireFox和IE下就都能正确换行,而且要注意,单词间的空格不能用 来代替,不然不能正确换行。

说说最易被忽略的CSS强制性换行的更多相关文章

  1. CSS强制性换行

    一般情况下,元素拥有默认的white-space:normal(自动换行,PS:不 换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空格的 ...

  2. CSS强制性换行word-break与word-wrap的使用

    一般情况下,元素拥有默认的white-space:normal(自动换行,不换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空格的字符或字 ...

  3. css文本超出部分省略号&CSS强制换行总结

    word-break:break-all单词截断自动换行 word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congra ...

  4. 常用样式制作思路 自定义按钮~自适应布局~常见bug seajs简记 初学者必知的HTML规范 不容忽略的——CSS规范

    常用样式制作思路   学习常用样式总结参考来自这里 带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en" ...

  5. CSS 段落/换行/缩进

    CSS 段落/换行/缩进 1.盒模型 box-sizing: content-box|border-box|inherit; content-box(默认) : 实际宽度/高度 = width/hei ...

  6. 容易被忽略的CSS特性

    CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各种坑,先总结一些经常遇到的坑 大小写不敏感 虽然我们平时在写CSS的时候都是用小写,但其实CSS并不是大小写敏感的 .tes ...

  7. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  8. sql注入时易被忽略的语法技巧以及二次注入

    那些容易被忽略.容易被弄错的地方 sql注入时的技巧 ========================================================================= ...

  9. eafier 簡單易用 HTML、CSS 網頁編輯器(可自動插入 Tag 標籤)

    很久很久以前,一般人要做網頁的話大概都會用 FrontPage 之類的工具,更進階一點的會用 Dreamweaver 等軟體.雖然上述軟體提供很方便的「所見即所得」的編輯預覽模式,但寫出來的網頁程式碼 ...

随机推荐

  1. 网络与多线程---OC中多线程使用方法(一)

    小编在此之前,通过一个小例子,简单的形容了一下进程与线程之间的关系,现在网络编程中的多线程说一下!!! *进程的基本概念 每一个进程都是一个应用程序,都有自己独立的内存空间,一般来说一个应用程序存在一 ...

  2. luoguP4389 付公主的背包 多项式exp

    %%%dkw 话说这是个论文题来着... 考虑生成函数\(OGF\) 对于价值为\(v\)的物品,由于有\(10^5\)的件数,可以看做无限个 那么,其生成函数为\(x^0 + x^{v} + x^{ ...

  3. spring boot 集成 shiro

    写在前面 1.Shiro是Apache下的一个开源项目,我们称之为Apache Shiro.它是一个很易用与Java项目的的安全框架,提供了认证.授权.加密.会话管理,与spring Security ...

  4. xcode 拷贝新的ios image 进去以后 出现 the divices is locked

    苹果公司时不时的给你更新下ios系统.对于开发者来说.更新xcode是灾难性的. 一直在用xcode7.3.1,可是最新不小心把手机升级到 ios 10.1.1,这下好了,真机调试不行了.提示没有镜像 ...

  5. JavaMail发送和接收邮件API(详解)

    一.JavaMail概述: JavaMail是由Sun定义的一套收发电子邮件的API,不同的厂商可以提供自己的实现类.但它并没有包含在JDK中,而是作为JavaEE的一部分. 厂商所提供的JavaMa ...

  6. 使用CefSharp在.Net程序中嵌入Chrome浏览器(七)——右键菜单

    一个常用的功能就是禁止浏览器本身的右键菜单,靠在WPF中拦截鼠标事件是不行的,可以通过设置MenuHandler来实现. 首先实现一个IContextMenuHandler. public class ...

  7. Context Switching on the Cortex-M3

    http://coactionos.com/embedded%20design%20tips/2013/10/09/Tips-Context-Switching-on-the-Cortex-M3/ T ...

  8. 3I工作室的成员在2013年(第6届)中国大学生计算机设计大赛总决赛中荣获全国二等奖

    在暑假举行的2013年(第6届)中国大学生计算机设计大赛中,我院的参赛作品<毕业生论文选导系统>(作者:祝丽艳/许明涛:指导老师:元昌安/彭昱忠)入围总决赛,并荣获全国二等奖. 2013年 ...

  9. javascript 原型继承

    因为javascript没有专门的机制去实现类,所以这里只能是借助它的函数能够嵌套的机制来模拟实现类.在javascript中,一个函数,可以包含变量,也可以包含其它的函数,那么,这样子的话,我们就可 ...

  10. sql select 0 字段

    关于 select 语句中 0 某字段名字,的意思是:该某字段是不在指定的表中的,那么如果要在子查询中利用这个指定的表,且带有这个字段,那么就用这个方式来添加该字段,并以0来初始化该字段. 如下例: ...