css3整理--word-wrap/word-break/white-space
word-wrap语法:
word-wrap : normal | break-word
normal : 默认值,单词如果单词超长,会冲出边界(单个单词超长,在当前行显示)
break-word : 将内容在边界内换行,当单词在当前行放不下时,会自动切换到下一行(单个单词超长,在下一行显示)
word-break语法:
word-break:normal | break-all | keep-all
normal:如果设置为默认值时中文则到边界处的汉字换行,如果是英文整个单词换行,如果出现某个单词长度过长,则会撑破容器,如果边框为固定属性,则后面部分将无法显示;(单个单词长度超过容器长度)
break-all:可以强行截断英文单词,强行换行
keep-all:不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行,英文单词也整个换行,如果出现某个英文字符长度超过边界,则后面的部分将撑破容器,如果边框为固定属性,则后面部分无法显示
white-space语法:(浏览器处理折行时的空白符)
white-space:normal | nowrap | pre-wrap | pre-line | inherit
normal:默认,浏览器忽略空白符
nowrap:文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap:保留空白符,但是正常地进行换行。
pre-line:合并空白符,但是保留换行符。
inherit:继承父元素的设置
最好的处理方式是:(单词折行,超出隐藏)
word-wrap:break-word;
overflow:hidden;
css3整理--word-wrap/word-break/white-space的更多相关文章
- word break和word wrap
默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...
- word wrap 解惑
源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...
- reverse the string word by word
题目:Given an input string, reverse the string word by word. For example,Given s = "the sky is bl ...
- LeetCode 5:Given an input string, reverse the string word by word.
problem: Given an input string, reverse the string word by word. For example: Given s = "the sk ...
- Microsoft.Office.Interop.Word 创建word
Microsoft.Office.Interop.Word 创建word 转载:http://www.cnblogs.com/chenbg2001/archive/2010/03/14/1685746 ...
- dom4j解析xml报错:Nested exception: org.xml.sax.SAXParseException: White space is required between the processing instruction target and data.
采用dom4j方式解析string类型的xml xml: String string="<?xmlversion=\"1.0\" encoding=\ ...
- C#用Microsoft.Office.Interop.Word进行Word转PDF的问题
之前用Aspose.Word进行Word转PDF发现'\'这个字符会被转换成'¥'这样的错误,没办法只能换个方法了.下面是Microsoft.Office.Interop.Word转PDF的方法: p ...
- Sublime Text 2 自动开启换行 Word Wrap
首先当然要夸一下神器 Sublime Text 2,自从第一次用我就彻底把神马 Notepad++ 和 TextMate 打入冷宫,用来开发 WEB 项目从此 IDE 都不需要了! 下面讲讲如何自动开 ...
- 18. Word Ladder && Word Ladder II
Word Ladder Given two words (start and end), and a dictionary, find the length of shortest transform ...
- word to word
Question: For each word, you can get a list of neighbor words by calling getWords(String), find all ...
随机推荐
- NPOIHelp 按固定模板导出和直接导出
完整代码如下 using System; using System.Collections.Generic; using System.Data; using System.Text; using N ...
- Lemon OA第2篇:功能解析方法
Lemon OA,整个系统功能也算是比较丰富,OA的很多功能都能看见影子,虽然做得不是很强大 接触Lemon OA,起源于Activiti的学习热情,既然这样,研究Lemon OA的目标有3: 1.L ...
- 于erlang依赖的linux调优
[皇室]杭州-sunface(61087682) 上午 9:42:02 http://docs.basho.com/riak/latest/ops/tuning/linux/ 这篇文章对于erlang ...
- ggplot2 提取stat计算出来的数据
使用ggplot2 绘图时,我们只需要提供原始数据就可以了,ggplot2 内置了许多的计算函数,来帮助我们计算对应的数值. 最典型的的,当使用geom_boxplot 绘制箱线图时,我们只提供原始数 ...
- 你可能不知道UED和UCD
我们都知道UI是User Interface,即它的本意是用户界面,从字面上看是用户和界面组成,实际上还包括用户与界面之间的交互关系.UI最初对大家来说只是一个名词,它代表一些界面.当然重点还是是UI ...
- nginx配置ThinkPHP配置
配置时注意红色部分 server { listen 8888 default_server; #listen [::]:80 default_server; server_name _; root / ...
- 点击除元素以外的任意地方隐藏元素js
比如想实现点击列表弹出筛选器,点击其他任意地方关闭筛选器,如图 该筛选器class名 $(document).click(function () { $(".subMenu").h ...
- jenkins 启动slave,出现com.sun.deploy.net.FailedDownloadException: Unable to load resource: http://127.0.0.1:8080/jnlpJars/remoting.jar
master: linux slave: win7 64位系统 在配置好系统后,采用jnlp的方式启动slave节点,报错如下: com.sun.deploy.net.FailedDownloadEx ...
- 基于thinkphp的API日志
1.thinkphp日志 thinkphp的日志处理工作是由系统自动进行的 在开启日志记录的情况下,会记录下允许的日志级别的所有日志信息 系统的日志记录由核心的Think\Log类及其驱动完成,提供了 ...
- 二维码解析:使用 JavaScript 库reqrcode.js解析二维码
上次使用QRCode.js可以来生成二维码,但是我没有找到有文档说明可以对存在的二维码进行扫描解析其中的内容. 幸亏查找到了可行的解决方案,而且很好使哦!就是reqrcode.js 地址:https: ...