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


Posted in HTML / CSS onOctober 10, 2013

大家在制作的时候有时候会碰到英文文本超过固定宽度,不会自己换行的问题。这种问题以前解决的时候大多都用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的兼容情况
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行 

三、word-wrap的实例

CSS代码:

复制代码
代码如下:

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

HTML代码:
复制代码
代码如下:

<div>menglongxiaozhan menglongxiaozhan 梦龙小站 menglongxiaozhan menglongxiaozhan menglongxiaozhan menglongxiaozhan menglongxiao
zhan menglongxiaozhan menglongxiaozhanmenglongxiaozhanmenglongxiaozhan menglongxiaozhan menglongxiaozhan</div>

预览效果:
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行 
CSS3之文本换行word-wrap就为大家介绍到这里,这个属性基本上兼容所有主流浏览器,是个不错的属性哟。更多CSS3属性方面的介绍,尽情关注本blog的更新。
HTML / CSS 相关文章推荐
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
HTML中meta标签及Keywords
Apr 15 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 HTML / CSS
html网页引入svg图片的4种方式
Aug 05 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 #HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
Sep 27 #HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 #HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 #HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 #HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 #HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 #HTML / CSS
You might like
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
php foreach 参数强制类型转换的问题
2010/12/10 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
python 动态加载的实现方法
2017/12/22 Python
python实现K最近邻算法
2018/01/29 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
电大毕业生自我鉴定
2013/11/10 职场文书
小学数学课后反思
2014/04/23 职场文书
阳光体育活动总结
2014/04/30 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
反腐倡廉观后感
2015/06/08 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis