在css中，div、p、h标签等遇到连续的大段英文和数字时候，并不会按照正常情况下自动随盒子宽度限制而自动换行。css英文不自动换行怎么办？下面本篇文章给大家介绍一下使用CSS解决css纯数字和英文不自动换行的方法。
 

 
css英文不自动换行怎么办？
 
在CSS中，可以使用word-wrap: break-word;或word-break:break-all;来让英文强制换行。
 
word-break: break-all;设置文字的强制自动换行，但只对英文起作用，以字母作为换行依据。
 

 
因为文字的容器p的宽度为400px，所有它的内容会在到达400px时自动换行，但该行末端有个很长的英文单词，它并不会把单词挪到下一行在显示，而是在本行把单词截断，一部分保持在行尾显示，另一部分换到下一行显示，这样不是很利于英文的阅读。
 
word-wrap: break-word; 设置文字的强制自动换行，但只对英文起作用，以单词作为换行依据。
 

 
文字与上面一致，但区别在于它会把整个单词看成一个整体，如果该行末端宽度不够整个单词显示，它就会自动把整个单词放到下一行显示，而不会把单词截断掉。
 
示例：
 
p
 
{
 
width:9em;
 
border:1px solid #000000;
 
}
 
p.test1
 
{
 
word-wrap:break-word;
 
}
 
p.test2
 
{
 
word-break:break-all;
 
}
 
This paragraph text. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 
This paragraph text. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 
This paragraph text. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 
效果图：
 

 
更多web开发知识，请查阅 HTML中文网 ！！

 
在内容属性那里加上word-wrap: break-word;
 
如果右边留白太多的话，可以用word-break : break-all;
 
《使用word-wrap:break-word使文本自动换行》
 
文本框连续输入
 
数字”111111111111111111″或者
 
英文单词”adkjsakfjsalfkjsalkdjaslkfjsalkf”
 
会造成什么结果呢?—文字溢出,一般的处理方法是用overflow:hidden隐藏文字,有没有更好的解决文案呢?QA的童鞋要求自动换行.
 
用word-wrap:break-word即可
 
css手册上的解释
 
word-wrap
 
基本特性
 
兼容性： IE5.5+专有属性
 
基本语法
 
word-wrap : normal | break-word
 
语法取值
 
normal: 默认值。允许内容顶开指定的容器边界
 
break-word:内容将在边界内换行。如果需要，词内换行( word-break )也将发生
 
使用说明
 
设置或检索当当前行超过指定容器的边界时是否断开转行。此属性仅作用于有布局的对象，如块对象。内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute ，或者设定 display 属性为 block 。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 wordWrap 。
 
w3c的解释
 
http://www.w3.org/TR/css3-text/#word-wrap
 
转自http://www.putaoshu.com/?p=359
 
《word wrap 解惑》
 
源起
 
我们经常需要“修复”一个老生常谈的“bug”，那就是文本的自动换行问题。在专业术语上，这种期望得到的渲染现象被称作“word wrap”，即文本处理器有能力把超出页边的整个词自动传到下一行。
 
在现实项目中，尤其是在测试阶段，鉴于测试使用非常极端的测试用例，我们经常需要“修复”如图所示的这个问题：
 
![word-wrap-1.jpg](https://blog.moper.me/usr/uploads/2019/10/1513057542.jpg)
 
长单词溢出
 
图中，极长的这个英文单词(虽然是生造的)为了保证完整的显示，无奈地超出了容器的限制，它溢出了。为了“修复”这个“问题”，使得无论东亚还是西欧文字都能被限定在容器的尺寸范围内，我们一般会加上诸如“word-wrap: break-word; word-break: break-all;”这样的属性，令我们满意(好吧，其实是令测试满意)的结果如图所示：
 
![word-wrap-2.jpg](https://blog.moper.me/usr/uploads/2019/10/1069556968.jpg)
 
长单词被强行断行
 
从以结果现象为导向的观点出发，这个“bug”被“修复”了，但是在做了三五次这样的重复工作后，我开始产生这样几个疑问：
 
word-wrap 和 word-break 究竟是什么？
 
为什么会乐此不疲地重复碰到这个问题？
 
这个问题是问题么？
 
规则
 
在解惑之前，有几个关乎问题本质的客观现实需要指出，因为这些“常识”最容易被人忽视：
 
CJK 文字和 !CJK 文字有各自的排版规则。
 
在这里，CJK 代表 Chinese, Japanese, and Korean，即东亚文字，!CJK 就是非东亚文字，大多数情况下是西欧文字。
 
在文字的呈现规则上，两者很不相同，CJK 文字中，一个字母就是一个字素(单词)，独立成义，!CJK 文字中，一些字母组成一个字素，并且字素们由连接符“-”连接，或由空格“ ”分隔。
 
有关 CJK 文字更多的排版规则上，比较有代表性的是：对中文来说，标点符号不能成为行首(特殊除外)；双字长的标点符号(省略号、破折号)不能断开。
 
对于 !CJK，主要是：单词不能在中间不合法地断开(合法情况例如从连接符处断开)；标点符号不能成为行首(特殊除外)
 
解惑一
 
word-wrap 和 word-break 究竟是什么？对于这个问题，直接拜访 W3C 官方，找到 CSS3 草案：http://www.w3.org/TR/2010/WD-css3-text-20101005/，再访问微软，借鉴诸如 http://msdn.microsoft.com/en-us/library/ms531184%28VS.85%29.aspx
 
得出的结论如下：
 
word-wrap, line-break, word-break 这几个属性都是 MS 的独立实现，随后其他浏览器也不同程度地实现了其中的某些，之后，这几个属性都被吸纳为 CSS3 标准。在对文字排版的渲染上，微软还是走在前面的。
 
在现有的 CSS3 草案中，关乎到文字排版的几个重要属性有：white-space, text-wrap, word-wrap, line-break, word-break
 
根据 CSS3 的描述，列出这些属性各自的要点，这部分读者可以跳过……
 
white-space 是 white-space-collapsing 和 text-wrap 的缩写
 
属性设置 white-space-collapsing设置 text-wrap空行空格文字自动换行效果
 
normalcollapsenormalcollapsecollapsewrap忽略多余空行和空格，文字自动换行
 
prepreservenonepreservepreserveno wrap保留所有空行和空白，文字不自动换行
 
nowrapcollapsenonecollapsecollapseno wrap忽略多余空行和空格，文字不自动换行
 
pre-wrappreservenormalpreservepreservewrap保留所有空行和空白，文字自动换行
 
pre-linepreserve-breaksnormalpreservecollapsewrap合并多余空格，保留多余空行，文字自动换行
 
text-wrap 定义文本的自动换行效果
 
属性效果
 
normal在允许的断点处自动换行
 
none文本不会自动换行；对于不“合身”的容器，文本将会溢出
 
unrestricted在任意的文法单词间都可断行，比 normal 的限制要松散很多
 
suppress除非断行处没有其他任何允许的断点，方可进行断行，这比 unrestricted 严格，比 normal 松散
 
word-wrap 执行最激进的单词断行控制，从单词的内部断开以防止文本溢出容器并且完全适应容器的宽度
 
在 IE 的实际效果中，word-break 的效果要激进得多，它穷凶极恶地断开所有单词(如果到达边界的话)
 
属性效果
 
normal仅在允许的文本断点处自动换行
 
break-word如果一行中没有其他可接受的断点，那么将强行断开文本单词
 
line-break 是断行的规则，针对东亚文字
 
基本是针对日文的换行规则
 
word-break 是断行的规则，针对非东亚文字
 
属性效果
 
normal根据特定非东亚文字自己的规则来决定是否自动断行
 
break-all允许非东亚语言文本行的任意字内断开。该值适合包含一些非东亚文本的东亚文本
 
keep-all不允许非东亚语言文本行的任意字内断开。该值适合包含一些东亚文本的非东亚文本
 
hyphenation文本会在合适的连字符处断开，这需要浏览器的支持
 
做一个归纳：专门用于控制文本自动换行功能的属性是 text-wrap 和 word-wrap，而 line-break 和 word-break 用来控制断行和单词边界分隔，根据 W3C 的描述来说，word-wrap 是最激进的自动换行方式，可以强行断开单词。而现实情况是，word-break: break-all; 的方式要更为激进，如图：
 
![word-wrap-3.jpg](https://blog.moper.me/usr/uploads/2019/10/2185038912.jpg)
 
word-wrap
 
![word-wrap-4.jpg](https://blog.moper.me/usr/uploads/2019/10/3596530218.jpg)
 
word-break
 
对比 word-wrap: break-word; 和 word-break: break-all;，两者都将文本限定在了容器的范围内，只是 break-all 将所有单词，不论长短地，通通截断，break-word 则非如此，它尽量地遵从了排版规则。
 
兼容性
 
由于几个属性都来自于微软(部分来自于 CSS3)，那么理所当然 IE 是支持最良好的，不过对于浮动元素，IE67 的表现会有些 bug(可在文后给出的 demo 中验证)。
 
至于其他浏览器，FF 3.6 不支持 word-break；Chrome 7 支持良好；Safari 5 同 Chrome；Opera 10 同 FF
 
解惑二三
 
碰到相关问题的场景大体是两个：
 
测试使用了很极端的测试用例(比如 asdfasdfasdfasdfasdfasdfasdf)
 
IE67 下，在宽度不大的容器中使用了浮动元素，同时浮动元素内包含了长的串，如图：
 
![word-wrap-5.jpg](https://blog.moper.me/usr/uploads/2019/10/1588520501.jpg)
 
IE67 中浮动盒子杯具
 
对于场景一，使用 word-wrap: break-word;
 
对于场景二，使用 IE67 的 hack，word-break: keep-all; 或者用 inline-block 来代替浮动(IE67 中，hasLayout 的 inline 盒子大体等同于 inline-block)
 
回头看疑问二，我们为什么会乐此不疲地重复碰到这个问题？原则上，各个浏览器默认的文字排版方式已经很好地顾及了 CJK 文字和 !CJK 文字，根据各个语言自己的规则来呈现排版，不应该出现诡异的问题。所以，对于上面的两个问题场景，之所以产生场景一，是因为使用了极端的测试用例，但是在现实中，这种极长的英文单词是根本不存在的(特殊行业除外)，又，即使英文单词较长，也不应该突兀地截断，这有违西欧文字的排版规则。所以我认为，如果在现实环境下发生场景一中的问题，责任应该在于版面的设计，比如容器宽度太小，而不是去截断文本；对于场景二，应该归咎于 IE67 的渲染 bug，这时，使用 inline-block 代替，或用 word-break: keep-all; 来给犯错的浏览器擦屁股。
 
实践方案
 
对于我们输出的内容(可控的)，不使用任何 word-wrap 和 word-break 等属性，对于可能产生的长单词溢出这种小概率事件，首先考虑容器宽度是否合理，其次可以为长单词添加连字符“-”以便合理地断开，最后设置 overflow: hidden; 避免视觉上的溢出。
 
对于用户输出的内容(不可控的)，比如评论等，由于不排除用户会输入“dddddddddddd”这样没营养的垃圾数据，使用 word-wrap: break-word; 来强行截断。
 
最后的观点
 
不能完全迁就测试用例，因为有时不合现实情理。
 
浏览器默认已经做得够好，强加诸如 break-all; 这样的指令是不优雅的。
 
问题大多不在于实现，而在于设计(如容器太窄)。
 
对于 bug 浏览器使用 hack 即可，这是它们的错。
 
相关资源
 
CSS3 草案：http://www.w3.org/TR/2010/WD-css3-text-20101005/
 
demo 页面：http://ued.taobao.com/lab/word-wrap/word-wrap.html
 
转自http://ued.taobao.com/blog/2010/10/14/research-of-word-wrap/

 
在我们日常的编码中经常会遇到这段文字不可以换行，或者自动换行的需求。虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧(至少♦ 嘻嘻。。。)。今天我们来学习一下如何熟练的掌握用css实现文字的强制不换行/自动换行/强制换行的方法。需要的伙伴们可以来一起学习哦！
 
1. 强制不换行
 
div{
 
white-space:nowrap;
 
}
 
2. 自动换行
 
div{
 
word-wrap: break-word;
 
word-break: normal;
 
}
 
3. 强制英文单词断行
 
div{
 
word-break:break-all;
 
}
 
4. CSS设置不转行：
 
overflow:hidden 隐藏
 
white-space：normal 默认
 
pre 换行和其他空白字符都将受到保护
 
nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象
 
5. 设置强行换行：
 
word-break:
 
normal ; 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
 
break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
 
keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法
 
英文不换行
 
CSS里加上 word-break: break-all; 问题解决。这个问题只有IE才有，在FF下测试,FF可以自己加滚动条，这样也不影响效果
 
建议大家做Skin时，记得在body里加 word-break: break-all; 这样可以解决IE的框架被英文撑开的问题
 
以下引用word-break的说明, 注意word-break 是IE5+专有属性
 
语法：
 
word-break : normal | break-all | keep-all
 
参数：
 
normal : 　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
 
break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
 
keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本
 
说明：
 
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
 
对于中文，应该使用break-all 。
 
学习完了吗? 记得多多练习哦!  每天进步一点点!¤¤
 
转：css实现强制不换行/自动换行/强制换行
 
css实现强制不换行/自动换行/强制换行 [日期:2007-08-22] 来源:  作者: [字体:大 中 小] 强制不换行 div{ white-space:nowrap;} 自动换行 div{  ...
 
CSS 强制换行和禁止换行学习
 
强制换行       1.word-break: break-all;       只对英文起作用,以字母作为换行依据.       2.word-wrap: break-word;   只对英文起作 ...
 
CSS 中的强制换行和禁止换行
 
强制换行       1.word-break: break-all;       只对英文起作用,以字母作为换行依据.       2.word-wrap: break-word;   只对英文起作 ...
 
CSS 强制换行和禁止换行强制换行 和禁止换行样式
 
强制换行 1.word-break: break-all;       只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word;   只对英文起作用,以单词作为换行依据. ...
 
CSS - 强制换行和禁止换行强制换行 和禁止换行样
 
强制换行 word-break: break-all;       只对英文起作用,以字母作为换行依据. word-wrap: break-word;   只对英文起作用,以单词作为换行依据. whi ...
 
html中的div、td 、p 等容器内强制换行和不换行的实现
 
div.td .p 等容器内强制换行和不换行,在某些情况下还是比较实用的,下面本文整理了一些相关方面的知识,并有具体的实现方法,需要的朋友可以参考下1.强制不换行,同时以省略号结尾. 代码如下:&lt ...
 
不同浏览器下word-wrap,word-break,white-space强制换行和不换行总结
 
强制换行与强制不换行用到的属性 我们一般控制换行所用到的CSS属性一共有三个:word-wrap; word-break; white-space.这三个属性可以说是专为了文字断行而创造出来的.首先我 ...
 
CSS实现不换行/自动换行/文本超出隐藏显示省略号
 
在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...
 
转css中文英文换行、禁止换行、显示省略号
 
css中文英文换行.禁止换行.显示省略号 原创 2016年08月09日 14:20:01   word-break:break-all;只对英文起作用,以字母作为换行依据 word-wrap:brea ...
 
随机推荐
 
[转]Unicode utf8等编码类型的原理
 
FROM:http://www.cnblogs.com/daxiong2014/p/4768681.html 1.ASCII码          我们知道,在计算机内部,所有的信息最终都表示为一个二进 ...
 
C++提前delete
 
// ///类析构以后,成员变量内存空间释放, ///函数 和 变量 还是可以引用的 / ...
 
jquery 常用函数集锦
 
html() 方法的功能是设置或获取元素中显示的内容css() 方法的功能是设置或获取元素的某项样式属性 $("#61dh a").css('color','#123456'); ...
 
如何让静态库中的可执行程序不调用的函数不链接进该可执行程序？(-ffunction-sections -Wl,--gc-sections)
 
关键词: -Wl,--gc-sections   -ffunction-sections  链接  elf   库 有时我们会遇到这种情况,可执行程序需要链接一些静态库,但是静态库中的函数并没有全部使 ...
 
Ajax的ActionLink方法(适用于异步加载)
 
8.2.1  AJAX的ActionLink方法 在Razor视图中,AJAX辅助方法可以通过Ajax属性访问.和HTML辅助方法类似,Ajax属性上的大部分AJAX辅助方法都是扩展方法(除了Ajax ...
 
jsp文件中的alert等等
 

 
WCF之添加自定义用户名密码认证
 
1.创建WCF服务应用以及调用客户端(请自行google).  2.创建X509证书       cmd 进入  C:\Program Files\Microsoft SDKs\Windows\v6. ...
 
让C#、VB.NET实现复杂的二进制操作
 
VB.NET和C#属于高级语言,对二进制位操作的支持不是很好,比如没有了移位运算等,用的时候确实很不方便,所以在闲暇之余我重新封装了一个用于C#.VB.NET的位操作类库,通过该类库可以实现数据移位. ...
 
Java 读取配置文件数据
 
Properties类 Properties类,是一个工具类,包含在java.util包中. 功能:可以保存持久的属性,通常用来读取配置文件或者属性文件,将文件中的数据读入properties对象中, ...
 
[转]常见的JavaScript内存泄露
 
什么是内存泄露 内存泄漏指由于疏忽或错误造成程序未能释放已经不再使用的内存.内存泄漏并非指内存在物理上的消失,而是应用程序分配某段内存后,由于设计错误,导致在释放该段内存之前就失去了对该段内存的控制, ...

 
一、word-wrap引见
 
word-wrap是设置对象内文字碰到对象顶边时是否采取换行排版组织。
 
1、语法
 
word-wrap:normal—— 应允模式顶开指定的容器边疆，碰到一连没有空格英文或没有空格数字不换行(默认，不设置对象也具有默认格式)
 
word-wrap:break-word —— 内容将在腹地内换行，当形式太多顶到对象鸿沟时，模式积极自愿换行。
 
2、思空见贯情况
 
对象内接连数字或字母太多后，内容顶边对象容器后不会换行，而是溢出持续不换行闪现。与汉字或有空格差异，汉字会定格容器要地本地会积极换行。
 

 
连气儿数字或字母造成不被动换行
 
3、应用语法
 
p{word-wrap:break-word}
 
配置html段落p内笔墨顶格对象容器边际被动换行。
 
二、被动换行word-wrap属性实例教程
 
1、代码
css逼迫换行 CSS5实例
 
.bos{ width:200px; height:80px; border:1px solid #F00; word-wrap: break-word; }
 
83480348023802ufjflsjfds843820483048jfdljfsl
 
 
配置class=bos对象宽度，边框，里面放入接连不时文字和数字形式。如果不配置word-wrap: break-word大要涉猎器中考察到本教程文章一初阶的第一张图看到连续数字模式不换行超过跨过溢出盒子。
 
这里给予对象配置word-wrap: break-word勒迫换行花色。