-------我们在处理文章的内容的过程中由于文章内容混杂有中文、英文、数字等其他字符，而我们常见的英文和数字是无法在包裹元素中自动换行，这往往会导致元素被撑破，如下图所示：

css中word-break可以解决这个问题，写个测试页面来做个笔记

css代码：

 body{font-size:14px;}

 p{ border:solid 1px red;width:200px;}

html代码：

<body>

    <p class="test">English中文中文中文中文中文中文Englis333hEnglishEnglishEnglish中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文 123ewewee

        123EnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglish

    </p>

</body>

此时的运行效果如开题处所说，下面给p标签加点样式

css代码：

.test{ word-break:break-all;}

效果如下：

可以发现所有的文字不管是中文还是英文还是数字都可以在包裹的p标签的末尾位置自动强制转行，这会有一个问题，会把本来是一个组合的字符串拆分看影响效果，再看一个

css代码：

.test {word-break:hyphenate;}

效果如下：

此css将可能会撑破包裹元素的字符段在断字点进行提前换行

再看

css代码：

 .test{ word-break:keep-all;}

效果如下：

在所有的字符段和字符段之间的空格处换行，保留了所有字符段的完整性。撑破包裹元素

word-break还有一些属性：

css代码：

 .test{ word-break:normal;}/*浏览器默认换行*/

如果无需保持单词的完整性，break-all可以解决撑破容器的问题，因为在实际应用过程中不会有长度能超过一个容器宽度的单词，所以hyphenate能解决即要单词完整又能不撑破容器，其次在有些场景下可以采用滚动条或者overflow:hidden等来保持界面的完整。



 
												


											
css中字符换行的一些问题的更多相关文章
	

    
								
  1. CSS中控制换行的四种属性
		
    一.white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果,点此查看示例. Example Source Code 语法: white-space : normal  ...
    
		
    2. 
						
  2. 深入理解CSS中的空白符和换行
		
    前面的话 CSS3新增了两个换行属性word-wrap和word-break.把空白符和换行放在一起说,是因为实际上空白符是包括换行的,且常用的文本不换行是使用的空白符的属性white-space:  ...
    
		
    3. 
						
  3. div中的字符换行
		
    div中的字符换行 转载自:http://blog.sina.com.cn/s/blog_6a79bc480100tizi.html   1.强制不换行,同时以省略号结尾. <div style ...
    
		
    4. 
						
  4. css中换行与不换行的样式
		
    常见的css样式分为换行与不换行两种需求 1.不换行显示省略号 text-overflow:ellipsis; white-space:normal; 2.换行自适应 word-break: brea ...
    
		
    5. 
						
  5. 【CSS】文字超出显示省略号&连续字符换行
		
    方法1.多行控制(css3) .text { width: 100%; word-break: break-all; display: -webkit-box; -webkit-line-clamp: ...
    
		
    6. 
						
  6. 理解与应用css中的display属性
		
    理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
    
		
    7. 
						
  7. css中的字体及文本相关属性
		
    css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...
    
		
    8. 
						
  8. css中的段落样式及背景
		
    一.段落样式 css中关于段落的样式主要有行高,缩进,段落对齐,文字间距,文字溢出,段落换行等.它们的具体语法如下: line-height : normal | length text-indent ...
    
		
    9. 
						
  9. CSS实现强制换行-------Day 78
		
    事实上最早的时候也考虑过这个问题,当时还在想须要判定文字的长度么,实在是傻到极点了,原来CSS中本来就有这个样式设置的.而今天正好看到了有这么一篇介绍.细致看了下,感觉还不错,这里也把实验的结果记录下 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. js 网上见到的动画函数 备份
			
    <script> function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer = setInterval(fu ...
    
			
    2. 
						
  2. css Tab选项卡2
			
    注意上述 红色方框   这个是锚点的变相  以及overflow:hiden结合, 利用  锚点对应 id  ,  也可以实现. 兼容ie6+  适合手机tab 简单   不需要脚本 其实还可以利用  ...
    
			
    3. 
						
  3. SQL开发中容易忽视的一些小地方(六)
			
    原文:SQL开发中容易忽视的一些小地方(六) 本文主旨:条件列上的索引对数据库delete操作的影响. 事由:今天在博客园北京俱乐部MSN群中和网友讨论了关于索引对delete的影响问题,事后感觉非常 ...
    
			
    4. 
						
  4. POJ--2289--Jamie&#39;s Contact Groups【二分图的多个匹配+二分法答案】
			
    链接:id=2289">http://poj.org/problem?id=2289 意甲冠军:有n个人,m个分组,每一个人能够分配到一些组别.问怎样分能使得人数最多的组别人数最少.  ...
    
			
    5. 
						
  5. SQL Server创建索引
			
    原文:SQL Server创建索引 什么是索引 拿汉语字典的目录页(索引)打比方:正如汉语字典中的汉字按页存放一样,SQL Server中的数据记录也是按页存放的,每页容量一般为4K .为了加快查找的 ...
    
			
    6. 
						
  6. Unity3d 镜面反射 vertex and frag Shader源代码
			
    Unity3d 镜面反射 网上能找到的基本上是固定管道或表面渲染的shader. 特此翻译为顶点.片段渲染的Shader, 本源代码仅仅涉及shader与cs部分. Editor部分使用NGUI绘制的 ...
    
			
    7. 
						
  7. 【Android先进】我们为什么要创建Activity基类Activity什么是一般的基类方法
			
    今天,它可以被视为只是基本完成了其首个商业项目,在发展过程中,风格,然而随着工作经验的积累.最终開始慢慢的了解到抽象思想在面向对象编程中的重要性,这一篇简单的介绍一下我的一点收获. 首先,在如今的项目 ...
    
			
    8. 
						
  8. 有效的XML: DTD（文档类型定义）介绍(转)
			
    文档类型定义和命名空间 有效(Valid)的XML文档: 首先,XML文档是个格式正规的(Well-formed)XML文档:(见格式正规的XML:语法 属性 实体 处理指令 样式单 CDATA节). ...
    
			
    9. 
						
  9. Javascript学习5 - 函数
			
    原文:Javascript学习5 - 函数 在Javascript中,函数和对象是交织在一起的.有些函数的特性与对象相关联.这一点的内容在第六部分会讨论到. 这一部分主要讨论函数与其它比较熟悉的语言( ...
    
			
    10. 
						
  10. HDU 2159 FATE （完全背包+有限尚需时日）（）双费背包
			
     FATE Problem Description 近期xhd正在玩一款叫做FATE的游戏,为了得到极品装备,xhd在不停的杀怪做任务.久而久之xhd開始对杀怪产生的厌恶感,但又不得不通过杀怪来升 ...
    
			
    11.