巧用css实现强制不换行、自动换行、强制换行

来源:互联网   编辑:思良  发表时间:2015-12-08  关注度:1023  

我们在写页面代码的时候,有时把一个表格的宽度定死后会出现里面的文字不见了,特别是英文。这就是他换行了所导致的,这时我们就需要加些CSS元素让它来听我们的话!根据自己以往的经验,也参考了些网上的文章,具体如下:

 

强制不换行

 

div{

white-space:nowrap;

}

 

 

自动换行

 

div{ 

word-wrap: break-word; 

word-break: normal; 

}

 

 

强制英文单词断行

 

div{

word-break:break-all;

}

 

============================================

 

CSS设置不转行:

 

overflow:hidden 隐藏

white-space:normal 默认 

pre 换行和其他空白字符都将受到保护

nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象

 

 

设置强行换行

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 。

对应的脚本特性为wordBreak。请参阅我编写的其他书目。

 

示例:

 

div {word-break : break-all; }

 


原文:http://blog.sina.com.cn/s/blog_4045b1860100efm2.html

    支付宝扫码领红包,不用多说,用过的人都知道,双赢的,你得红包,我得到同等推广红包,比如你扫到1元,我也得1元,大家得到的红包可以去实体店消费!新用户至少10元以上哦,每天都有!希望大家每天来本站扫码!感谢感谢!

    把打赏改成扫码红包了!支持本站就扫码下!


下一篇:优秀网页设计: 分享50个自适应Web设计实例


上一篇:利用CSS定位背景图片 background-position


小提示:按 回车[Enter]键 返回,按 ←键 返回上一页, 按 →键 进入下一页。

网友评论(0条评论)

选择头像
     

新闻评论(共有 0 条评论)

手机访问

本站APP

联系我

加我微信