html word-wrap,CSS3 Word-wrap

大家在平时的网页制作中一定碰到过这样的情况，比如说你在自己的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;

}

效果：

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

html word-wrap,CSS3 Word-wrap相关推荐

C#根据WORD模板生成WORD文档 C#网页打印
运行环境:WIN7 X64 + iis6.1 开发环境:vs2012+SQL2005 服务器环境:2003 X64 + SQL2005 + IIS 6.0 需求: 企业中需要各种各样的报表诸如WORD ...
c语言读取word文件内容,c 读取word c 读取word文档
c++如何读取word 基本步骤(1)创建)一个 MFC 的程序工程. 注意:在VC中对WORD进行操作需要在MFC AppWizard - Step 2 of4中的Automaiton选项上打上勾. ...
linux qt 生成word,Qt 生成word、pdf文檔
需求:將軟件處理的結果保存為一個報告文檔,文檔中包含表格.圖片.文字,格式為word的.doc和.pdf.生成word是為了便於用戶編輯. 開發環境:qt4.8.4+vs2010 在qt的官網上對於p ...
word模板生成word报表文档
主要功能为根据word模板生成word报表文档,注意引用Interop.Word.dll; 首先要生成word程序对象 Word.Application app = new Word.Applicat ...
ie8 html 编辑器为word,ie8生成word
1. 兼容IE8 导出Wrod方法直接var word=new ActiveXObject("word.Application");word.visible=true:(这句不要 ...
C#根据word模板生成word表格报表文档
主要功能为根据word模板生成word报表文档,注意引用Interop.Word.dll; 首先要生成word程序对象 Word.Application app = new Word.Applicat ...
apache poi使用例_使用java Apache poi 根据word模板生成word报表例子
[实例简介] 使用java Apache poi 根据word模板生成word报表仅支持docx格式的word文件,大概是word2010及以后版本,doc格式不支持. 使用说明:https://b ...
win10安装应用商店版word(ump版word)
1.在应用商店中搜索word,得到word链接地址: https://www.microsoft.com/en-us/p/word/cfq7ttc0k7c7?activetab=pivot%3aove ...
关于最近word模板以及word转pdf的总结
主要的学习和踩坑 word模板1类型只有文字的只要用这种方式实现非常好,没有图片的word模板;特别注意的是支持.doc的模板 2 第二种带图片的word模板,只支持 docx的 4 word转pdf ...
计算机word文档无法工作,word无法打开(WORD文档打不开_解决方法_电脑基础知识_IT/计算机_专业资料)...
word无法打开(WORD文档打不开_解决方法_电脑基础知识_IT/计算机_专业资料),哪吒游戏网给大家带来详细的word无法打开(WORD文档打不开_解决方法_电脑基础知识_IT/计算机_专业资料) ...

html word-wrap,CSS3 Word-wrap

html word-wrap,CSS3 Word-wrap相关推荐

最新文章

热门文章