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中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
css3背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 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
php 邮件发送问题解决
2014/03/22 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
javascript实现贪吃蛇小练习
2020/07/05 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
python实现目录树生成示例
2014/03/28 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
pytorch 数据集图片显示方法
2018/07/26 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
执行Python程序时模块报错问题
2020/03/26 Python
python代码实现图书管理系统
2020/11/30 Python
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
安全环保演讲稿
2014/08/28 职场文书
个人委托书范本
2014/09/13 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers