CSS解决英文自动换行问题
当容器内出现长串英文时,容器会被撑大,此时内容不会自动换行,那么如何用css来解决英文自动换行问题呢?请往下阅读:
如果是在Table内出现此问题,可以在table标签中加入 style="WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;"问题会得到解决。
那么,word-wrap同word-break的区别又是什么呢?
word-wrap是控制换行的。
使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。
word-break是控制是否断词的。
normal是默认情况,英文单词不被拆开。
break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。
keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)
ie下:
使用word-wrap:break-word;所有的都正常。
ff下:
如这2个都不用的话,中文不会出任何问题。英文语句也不会出问题。但是,长串英文会出问题。
为了解决长串英文,一般用word-wrap:break-word;word-break:break-all;。但是,此方式会导致,普通的英文语句中的单词会被断开(ie下也是)。
目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。
即英文单词应不应该被断开那?那问题很明显了,显然不应该被断开了。
对于长串英文,就是恶意的东西,自然不用去管了。但是,也要想些办法,不让它把容器撑大。
用:overflow:auto; ie下,长串会自动折行。ff下,长串会被遮盖。
所以,综上,最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
word-wrap:break-word;overflow:auto;在ie下没有任何问题。在ff下,长串会被遮住部分内容。
另,测试代码如下:
1.htm
<style>
.c1{ width:300px; border:1px solid red}
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
.c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
.c5{ width:300px;word-break:break-all; border:1px solid black}
.c6{ width:300px;word-break:keep-all; border:1px solid red}
.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
</style>
.c1{ width:300px; border:1px solid red}
<div class="c1">asdasd
</div>
<div class=c1>
This is all English. This is all English. This is all English.
</div>
<div class=c1>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c1>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
<div class="c2">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c2>
This is all English. This is all English. This is all English.
</div>
<div class=c2>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c2>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
<div class="c3">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c3>
This is all English. This is all English. This is all English.
</div>
<div class=c3>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c3>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
<div class="c4">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c4>
This is all English. This is all English. This is all English.
</div>
<div class=c4>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c4>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c5{ width:300px;word-break:break-all; border:1px solid black}
<div class="c5">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c5>
This is all English. This is all English. This is all English.
</div>
<div class=c5>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c5>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c6{ width:300px;word-break:keep-all; border:1px solid red}
<div class="c6">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c6>
This is all English. This is all English. This is all English.
</div>
<div class=c6>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c6>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
<div class="c7">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c7>
This is all English. This is all English. This is all English.
</div>
<div class=c7>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c7>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
CSS解决英文自动换行问题相关推荐
- CSS解决英文字母不换行问题
今天遇到一个英文字母不换行的问题,如图所示 通过百度,查找解决方案 1. word-break:break-all;只对英文起作用,以字母作为换行依据2. word-wrap:break-word; ...
- html英文不会自动换行,css怎么解决英文不换行?
我们在进行html开发时,特别是遇到一长串的英文时,它不能自动换行,直接一行显示,非常影响视觉,下面给大家分享下CSS分别实现英文强制不换行,自动换行,强制换行的方法. css解决英文不换行的方法: ...
- html表格不会自动变形,CSS 解决td里面内容太多把表格弄变形的原因,设置 自动换行。...
1 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前 ...
- CSS 解决td里面内容太多把表格弄变形的原因,设置 自动换行。
CSS 解决<td>里面内容太多把表格弄变形的原因,设置 自动换行. 1 < style="word-break:break-all"> 例如div宽200 ...
- css使英文强制换行
在指定宽度的div内,如果中文内容过长则会自动换行,但英文不会自动换行. 原因:英文单词之间有空格才会换行,对于一长串字母会被当成是一个单词而显示完 解决1:css强制英文换行 #wrap{word ...
- html怎样让文字自动换行,css中文字自动换行如何实现
css中文字自动换行如何实现 在div css布局中,遇到连续英文字母或连续数字在div.p.h2.h1等盒子里排成一排显示不会自动随盒子宽度限制而自动换行. 当然中文字在DIV或任意盒子中均会自动换 ...
- 长英文自动换行的最终解决方法
转自:http://www.cnblogs.com/yuzhongwusan/archive/2009/04/26/1443803.html 长英文自动换行的最终解决方法: 在table标签中加入 s ...
- html表格内容溢出隐藏,溢出隐藏:最全的利用css解决内容溢出问题的几种方案...
在p布局中,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱.内容溢出了容器,超出了容器所限定的宽度和高度应该怎么办呢?可以将文本溢出部分进行隐藏或者用省略号代替,那具体 ...
- ireport如何给static text加边框_html amp;amp; css 解决li浮动边框为2的问题
html && css 解决li浮动边框为2的问题 思路 问题:首先,li 浮动后,添加边框,则 中间 li 的边框会形成 1+1=2 的效果,1px的边框会变成2px.(例:分页模块 ...
最新文章
- Unity 2021创建2D休闲点击器游戏视频教程
- 当谷歌员工来到新公司的那一天,发现原来公司什么都没有
- ​两院院士评选“2021年中国/世界十大科技进展新闻”揭晓
- 我整理了HMOV四大5G旗舰的参数,可依然没能拯救我的选择困难症
- python数字类型-Python数字类型及其操作
- CentOS 6.6编译安装LAMP(Apache2+PHP+Mysql+PHPmyAdmin)
- CPU 硬盘性能到底相差多少
- 交换机网络嗅探方法之欺骗交换机缓存
- nuget的原理_微服务架构中APIGateway原理
- httpclient的post请求超时
- MySQL查询语句(select)详解(1)
- 能力提升综合题单 Part 8.9.1 最大流
- Xcode6与Xcode5之间的细节差别(Precompile Prefix Header)
- 你知道wps删除空白页的方法吗?进来看看吧
- PHP - 经典面试题大全,看这一篇就够了
- java app支付_java微信支付—APP
- 网页特殊符号(HTML字符实体)大全
- Windows defender 中保护历史记录不显示始终为空的解决办法
- 技术分享 | Hulu视频广告系统中的算法应用
- Python:实现binomial coefficient二项式系数算法(附完整源码)