css3 text-overflow和white-space，word-wrap，word-break进阶
一、text-overflow
1、text-overflow作用
简单来说，text-overflow用来设置文本溢出时是否用省略标记（...）
准确的说是设置溢出的文本在不显示的情况下怎样展示给用户，直接裁剪掉？用省略（...）标记？或者显示自定义的string。
2、text-overflow生效的条件
text-overflow只是说明文本溢出用什么方式显示，那什么情况会发生文本溢出现象？
white-space:nowrap的情况下- 单个超长字符串
以上2种情况文本会溢出，但是text-overflow的效果不会主动产生，要生效必须手动设置元素overflow:hidden来触发。
<style type="text/css">
p{
width: 100px;
background-color: #ccc;
}
.ellipsis{
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
}
.strellipsis{
text-overflow:ellipsis;
overflow: hidden;
}
</style>
<body>
<h3>1、普通文本溢出</h3>
<p class="ellipsis">文本内容文本内容文本内容文本内容</p>
<h3>2、超长字符串溢出</h3>
<p class="strellipsis">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</body>
总结:text-overflow只是说明文本溢出用什么方式显示，真正要达到溢出产生省略号的效果，普通文本需要定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）；超长字符串需要设置溢出内容为隐藏（overflow:hidden）。
3、text-overflow取值
text-overflow:[ clip | ellipsis |<string>]{1,2}
默认值为clip
3.1clip
clip代表溢出内容被裁剪掉了
Note:clip可能把一个字符截断，如果要在2个字符之间裁剪必须用空字符串('')。
<style type="text/css">
p {
width: 100px;
background-color: #ccc;
/* 下面2个属性必须设置 */
white-space: nowrap;
overflow: hidden;
}
.overflow-clip {
text-overflow: clip;
}
.overflow-clip2 {
text-overflow: "";
} </style> <body>
<p class="overflow-clip">abcd abcd abcd abcd abcd abcd abcd</p>
<p class="overflow-clip2">abcd abcd abcd abcd abcd abcd abcd</p>
</body>
3.2ellipsis
ellipsis:溢出内容用省略号表示。
3.3<string>
ellipsis：<string>还在试验阶段，存在兼容性问题，生成环境还不能用。
<style type="text/css">
p {
width: 100px;
background-color: #ccc;
/* 下面2个属性必须设置 */
white-space: nowrap;
overflow: hidden;
}
.overflow-visible {
/*重置white-space值*/
white-space: initial;
}
.overflow-clip {
text-overflow: clip;
}
.overflow-ellipsis {
text-overflow: ellipsis;
}
.overflow-string {
/*存在兼容性问题 */
text-overflow: " [..]";
}
</style> <body>
<p class="overflow-visible">文本内容文本内容文本内容文本内容</p>
<p class="overflow-clip">文本内容文本内容文本内容文本内容</p>
<p class="overflow-ellipsis">文本内容文本内容文本内容文本内容</p>
<p class="overflow-string">文本内容文本内容文本内容文本内容</p>
</body>
Note:上面例子中只设置了p元素的宽度值，高度不是必须的。
3.4text-overflow取值为2个值的情况
text-overflow:[ clip | ellipsis |<string>]{1,2}说了text-overflow的值最少1个最多2个，下面说明2个值的含义。
text-overflow: ',' '.';代表direction:ltr时，文本溢出部分用[.];direction:rtl时，文本溢出部分用[,]。
<style type="text/css">
p {
text-overflow: ',' '.';
width: 100px;
background-color: #ccc;
/* 下面2个属性必须设置 */
white-space: nowrap;
overflow: hidden;
}
</style> <body>
<p style="direction:ltr">12345678abcdefg</p>
<p style="direction:rtl">12345678abcdefg</p>
</body>
二、white-space
1、white-space作用及取值
white-space设置如何处理元素内的空白。
white-space:normal | pre | nowrap | pre-wrap | pre-line
normal:默认值，空白会被浏览器忽略。
也就是说连续的空白符会被合并，换行符会被当作空白符来处理。填充line盒子时，必要的话会换行。
pre:连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。 行为类似html标签<pre>。
nowrap:文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
和 normal 一样，连续的空白符会被合并。但文本内的换行无效，文本会在同一行上继续，直到遇到<br>标签为止。
pre-wrap：保留空白符序列，但是正常地进行换行。也就是说连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充line盒子时才会换行。
pre-line：合并空白符序列，但是保留换行符。也就是说连续的空白符会被合并。在遇到换行符或者<br>元素，或者需要为了填充line盒子时会换行。
inherit:从父元素继承white-space属性的值。
2、white-space的一个有意思的应用场景
行级元素内不会自动换行，有需求需要让行级元素换行，我们都直接用<br/> 这个换行标签解决。
据《CSS SECRET》说<br/>换行不仅在可维护性方面是一种糟糕的实践，而且污染了结构层的代码 。这句话先保留意见，那么有什么其他的解决方案？
我好像没有这样思考过？！今天看到一个有意思的解决方案。
原理也很简单，用的都是我们熟知的::after和white-space，如下。
<style>
.inline-element::after {
content: "\A";
white-space: pre;
}
</style>
<span>文字换行<span class="inline-element">文字</span>换行文字换行文字换行</span>
- ::after伪元素的content设置为“\A”。 换行符的Unicode 字符是：0x000A 。 在 CSS 中，这个字符可以写作 "\000A"， 或简化为 "\A"。所以意思是在元素末尾添加了一个换行符的。
- white-space设置为pre，white-space默认值是normal，换行符会被当作空白符来处理，所以需要设置为pre，达到换行的效果。
看完后是不是觉得很有意思？虽然都是些耳熟能详的小知识，但是只要善于思考应用就会有奇用！
三、word-wrap
word-wrap也可以用来设置文本行为，当前行发生溢出时是否断开转行。
word-wrap:normal|break-word
- normal:浏览器默认值
- break-word设置长单词或者URL地址内部进行换行，为了防止当一个字符串太长而找不到它的自然断句点时而出现溢出包含框的现象。
1、word-wrap和word-break对比
这两个都是用作单词内断句。
word-wrap:控制换行，并且溢出时表示是否允许浏览器在单词内断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
word-break:表明怎样进行单词内的断句。
举例：word-wrap:
<style type="text/css">
div{
width: 200px;
height: 100px;
background-color: #ccc;
}
.bw{
word-wrap:break-word;
}
.normal{
/*word-wrap:normal;*/
}
.wb{
word-break:break-all;
}
</style>
<body>
<h2>word-wrap:normal</h2>
<br/><div class="normal">a long word ddddddddddddddddddddddddddddddddd a long word</div>
<h2>word-wrap:break-word</h2>
<br/><div class="bw">a long word ddddddddddddddddddddddddddddddddd a long word</div>
<h2>word-break:break-all</h2>
<br/><div class="wb">a long word ddddddddddddddddddddddddddddddddd a long word</div>
</body>
可见word-wrap的表现行为是：
遇到一个长单词，在一行中放不下时，首先换一行放到下一行，如果word-wrap的值是默认的normal，则这个字符串太长找不到自然断句点时就发生溢出。可用word-wrap:break-word强制断句。
而break-word的表现行为是：简单粗暴，直接在单词内断句，省空间，并不会尝试把一个长字符串放到下一行。
有word-break时word-wrap不起作用。所以很多人在断句时会写word-wrap:break-word;word-break:break-all;其实是没必要的，只要一个word-break:break-all足以。
四、word-break
word-break: normal|break-all|keep-all;
normal:使用浏览器默认的断字规则。
break-all: non-CJK(中文，韩文，日文)语言的文本允许在单词内任意字符断开。适用于包含一些非亚洲文本的亚洲文本。
keep-all:非CJK同normal，CJK不允许字断开。适用于包含少量亚洲文本非亚洲文本。
<style>
.narrow {
padding: 5px;
border: 1px solid;
width: 8em;
}
.normal {
word-break: normal;
}
.breakAll {
word-break: break-all;
}
.keep {
word-break: keep-all;
}
</style> <body>
<p>1. <code>word-break: normal</code></p>
<p class="normal narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 </p>
<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 </p>
<p>3. <code>word-break: keep-all</code></p>
<p class="keep narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
</body>
五、应用
1、新浪微博
2、昵称超出显示省略号
.vg_headinfo_nickname{
display: inline-block;
font-size:1rem;
max-width:85%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color:#fff;
height: 1.4rem;
position: relative;
padding-right: 1.125rem;
}
参考文档：
最后更新：【update20161115】
本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/5443445.html有问题欢迎与我讨论，共同进步。
css3 text-overflow和white-space，word-wrap，word-break进阶的更多相关文章
- word wrap 解惑
源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...
- 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=\ ...
- 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)
考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...
- word break和word wrap
默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...
- Microsoft.Office.Interop.Word 创建word
Microsoft.Office.Interop.Word 创建word 转载:http://www.cnblogs.com/chenbg2001/archive/2010/03/14/1685746 ...
- 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 ...
- 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 都不需要了! 下面讲讲如何自动开 ...
- 【参考】IBM sun.io.MalformedInputException and text encoding conversions transforms numerals to their word equivalents - United States
Problem(Abstract) When converting contents from a file or string using WebSphere Application Server, ...
随机推荐
- 添加 Pool Member - 每天5分钟玩转 OpenStack（123）
我们已经有了 Load Balance Pool "web servers"和 VIP,接下来需要往 Pool 里添加 member 并学习如何使用 cloud image. 先准 ...
- C#6新特性，让你的代码更干净
前言 前几天看一个朋友的博客时,看他用到了C#6的特性,而6出来这么长时间还没有正儿八经看过它,今儿专门看了下新特性,说白了也不过是语法糖而已.但是用起来确实能让你的代码更加干净些.Let's try ...
- Mysql5.6 online ddl
Innodb性能改善方面: --Users can add indexes and perform standard table alterations while the database rema ...
- ASP.NET Core 中文文档 第二章 指南（4.10）检查自动生成的Detail方法和Delete方法
原文 Examining the Details and Delete methods 作者 Rick Anderson 翻译 谢炀(Kiler) 校对 许登洋(Seay).姚阿勇(Mr.Yao) 打 ...
- unsafe
今天无意中发现C#这种完全面向对象的高级语言中也可以用不安全的指针类型,即要用到unsafe关键字.在公共语言运行库 (CLR) 中,不安全代码是指无法验证的代码.C# 中的不安全代码不一定是危险的, ...
- oracle运算符
单引号('): 在Oracle中,应该只运用单引号将文本和字符和日期括起来,不能运用引号(包括单双引号)将数字括起来. 双引号("): 在Oracle中,单双引号意思不同.双引号被用来将包含 ...
- 随机记录工作中常见的sql用法错误（一）
没事开始写博客,留下以前工作中常用的笔记,内容不全或者需要补充的可以留言,我只写我常用的. 网上很多类似动软生成器的小工具,这类工具虽然在表关系复杂的时候没什么软用,但是在一些简单的表结构关系还是很方 ...
- Yii2.X 多语言-类图
- α-β剪枝算法的java语言实现（非常实用）
利用α-β剪枝算法,对下图所示的博弈树进行搜索,搜索得到根节点选择的走步,以及没有必要进行评估的节点,并求出给出在何处发生了剪枝,以及剪枝的类型(属于α剪枝还是β剪枝). 注:□表示MIN节点:○表示 ...
- css单行文本与多行溢出文本的省略号问题
在文字布局和代码编写过程中遇到文本溢出是常有的事,下面总结一下对于单行文本溢出和多行文本溢出省略号的处理. 一.单行文本省略号 <p class="text1"> 这是 ...