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 相关文章推荐
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
Oct 19 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 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
农民和部队如何穿矿
2020/03/04 星际争霸
php读取xml实例代码
2010/01/28 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
原生js调用json方法总结
2018/02/22 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
python实现发送邮件功能代码
2017/12/14 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
python实现按日期归档文件
2021/01/30 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
积极分子思想汇报
2014/01/04 职场文书
大学活动策划书范文
2014/01/10 职场文书
导师工作推荐信范文
2014/05/17 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书