CSS3 Word-wrap

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

CSS3中有关于文本效果的属性,前面在《CSS3 Text-shadow》和《CSS3 Text-overflow》介绍了文本阴影,文本注解的使用,今天主题是超长英文文本自动换行word-wrap的使用,在介绍这个属性的同时,我还把word-breakwhite-space两个属性一起放进来介绍,因为这几个属性常给我平时的制作中带来混淆的感觉,搞不清楚在什么地带需要使用中word-wrap属性,什么时候又应该使用word-break属性,而又何时才能使用white-space。为了解决这个疑问,今天特意将他们放在本文中一起介绍。

大家在平时的网页制作中一定碰到过这样的情况,比如说你在自己的blog中制作了一个完美而且又靓丽的评论布局,让你的用户浏览网页是可以给你添加评论,但当有人发布了一个原始网址或者其它超长的文本时,你此时的布局就被他们给彻底的破坏了,为了解决这样的问题你平时可能是这样来处理的:

1、在你评论的box中增加了一个"overflow-x:auto",当内容超过容器时,在容器底部实现一个水平的scrollbar;

2、你或许会使用"overflow:hidden"直接隐藏所超出的文本,来达到你的布局完美;

3、你可能会使用js来控制;

虽然以上的方法都可以实现,达到不撑破容器,从而不破坏你的网页布局,但在CSS3中提供了一个更好的实现方法,那就是今天我要介绍的CSS3的word-wrap属性。下面我们就一起来看看word-wrap具有哪些属性,并且在实际中又是如何运用,照样先从其语法部分开始,然后一步一步通过实例来加深对word-wrap的理解,别的先不说了,现在就开始

一、word-wrap使用:

语法:

   word-wrap : normal | break-word

 

取值说明:

1、normal和break-word,其中normal为默认值,当其值为normal控制连续文本换行(允许内容顶开容器的边界,换句话说内容可以撑破容器);

2、break-word将内容在边界内换行(不截断英文单词换行,截断英文单词换行需要使用word-break:all属性),我们先来看两个简单的实例:

1、word-wrap:normal

  p {
    width:200px;
    border: 1px solid #ccc;
    padding: 5px;
  }

 

效果:

Without word-wrap http://www.w3cplus.com_css_css3_word_wrap

没有带word-wrap测试中英文混排 http://www.w3cplus.com_css_css3_word_wrap

没有带word-wrap测试中英文混排t

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/content/css3-word-wrap

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部