前端开发

 首页 > 前端开发 > css教程 > CSS3文本换行word-wrap解决英文文本超过固定宽度不换行

CSS3文本换行word-wrap解决英文文本超过固定宽度不换行

分享到:
【字体:
导读:
         [导读] CSS3文本换行word-wrap解决英文文本超过固定宽度不换行 这种问题以前解决的时候大多都用overflow:hidden或者JavaScript来控制,让其看起来接近完美。 当CSS3出现的时候,我们就可以用CSS3之文...

CSS3文本换行word-wrap解决英文文本超过固定宽度不换行

这种问题以前解决的时候大多都用overflow:hidden或者JavaScript来控制,让其看起来接近完美。

当CSS3出现的时候,我们就可以用CSS3之文本换行word-wrap来解决这个问题了。下面就为大家介绍一下CSS3之文本换行word-wrap吧。 

一、word-wrap的语法 

1、语法 

复制代码

代码如下:

word-wrap : normal || break-word


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

二、word-wrap的兼容情况 


blob.png


三、word-wrap的实例 

CSS代码: 

div {width:300px;height:200px;border:1px solid #ccc;word-wrap:break-word;}


HTML代码: 

menglongxiaozhan menglongxiaozhan 自学php网 menglongxiaozhan menglongxiaozhan menglongxiaozhan menglongxiaozhan menglongxiao  zhan menglongxiaozhan menglongxiaozhanmenglongxiaozhanmenglongxiaozhan menglongxiaozhan menglongxiaozhan


预览效果: 


blob.png


分享到:
css3阴影、倒影、渐变小技巧合集二、先是...
做: 二、先是建立两个文本不做处理运行如图 三、给第一个div字体加上阴影 text-shadow: 5px 5px 10px red;  text-shadow: 5px 5px 5px red,5px -5px 10px yellow; box-shadow:用法与text-shadow类似,只不过它是对盒子,比如DIV text-shadow:[颜色(Color)  x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(col...
css3过渡和动画的区别详解
CSS3 过渡 CSS3中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript。用鼠标移过下面的元素: 也就是说我们设置好元素过渡后,突然间改变元素的属性,它会缓慢的过渡过去, 列入下面方法,当突然改变元素宽度时候,它会2秒后变成你改变的值 div {     transition: width 2s;...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……