一、iOS 上的 Safari 没有滑动惯性
在开发 iphone 微信端的时候，如果给一个div设置样式为滑动,样式如下：
1
2
3
|
div {
overflow-y: scroll;
}
|
会发现 Safari 的滑动很僵硬，这时候可以用以下样式来解决：
1
2
3
|
div {
-webkit-overflow-scrolling: touch;
}
|
二、去除 iphone 中点击按钮会出现一个半透明的灰色背景的问题
在开发 iphone 微信端的时候，同样发现，如果点击一个按钮，按钮会出现一个半透明的灰色背景，这时候可以用以下样式来解决：
1
2
3
4
5
6
7
8
|
a,
img,
button,
input,
textarea,
div {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
|
三、div 中保留文本的空格、换行以及 tab 字符的处理
在后台用textarea标签写入文本放入前端显示的时候，发现之前在textarea中的文本都被格式化了（浏览器默认把文本中的空格、换行以及 tab 字符都处理掉了），如果想保留文本的格式，可以用以下样式来解决：
1
2
3
|
div {
white-space: pre-wrap;
}
|
需要特别注意的是，white-space有五种值可以选择，normal、pre 、nowrap 、pre-wrap、pre-wrap,每一种值都有不同的表现形式，其中：
normal 是 white-space 的默认值；pre 会保留文本中额外的空格, 而且会保留文本中的换行；nowrap 不会保留文本中额外的空格，而且会禁止文本中的换行；pre-wrap 会保留文本中额外的空格, 而且会让文本正常的换行；pre-line 不会保留文本中额外的空格，但是会让文本正常的换行；
这样解释读者会有一些迷惑，接下来用代码进一步说明，参考如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<style>
.a {
white-space: pre;
}
.b {
white-space: nowrap;
}
.c {
white-space: pre-wrap;
}
.d {
white-space: pre-line;
}
.e {
white-space: normal;
}
</style>
<div class="a">
hdfkf sjnfjsdkfn sdjf d d dfklsf sdfhjs sdfbsjdh df djfsf dsfsdf sdfbsjdh hfh
hfjsgjf
</div>
<hr />
<div class="b">
hdfkf sjnfjsdkfn sdjf d d dfklsf sdfhjs sdfbsjdh df djfsf dsfsdf sdfbsjdh hfh
hfjsgjf
</div>
<hr />
<div class="c">
hdfkf sjnfjsdkfn sdjf d d dfklsf sdfhjs sdfbsjdh df djfsf dsfsdf sdfbsjdh hfh
hfjsgjf
</div>
<hr />
<div class="d">
hdfkf sjnfjsdkfn sdjf d d dfklsf sdfhjs sdfbsjdh df djfsf dsfsdf sdfbsjdh hfh
hfjsgjf
</div>
<hr />
<div class="e">
hdfkf sjnfjsdkfn sdjf d d dfklsf sdfhjs sdfbsjdh df djfsf dsfsdf sdfbsjdh hfh
hfjsgjf
</div>
<hr />
<div>
hdfkf sjnfjsdkfn sdjf d d dfklsf sdfhjs sdfbsjdh df djfsf dsfsdf sdfbsjdh hfh
hfjsgjf
</div>
|
这里我们要特地留意一下 pre 与 pre-wrap 的区别，正常情况下，两者的现实没有差异，如下图：
但是如果将窗口拉窄,我们会发现，pre-wrap会让文本根据窗口宽窄自动换行，而pre的换行不会受窗口宽窄影响：
四、让盒子里的字超出长度后，可以缩略显示变成点点点
1、在 div 框里的内容超出长度后，我们可以让超出部分的内容变成点点点，样式如下：
1
2
3
4
5
|
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
|
然后我们就能获得我们想要的样式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<style>
.a {
width: 100px;
border: 1px solid gray;
}
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<div class="a">Wow,CSS is very very very very very cool !</div>
<hr />
<div class="a ellipsis">Wow,CSS is very very very very very cool !</div>
|
效果图如下：
2、但是如果我们想让 div 里的内容两行或者三行之后再显示点点点，我们应该怎么办呢？如果你也有疑惑，可以参考如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<style>
.a {
width: 100px;
border: 1px solid gray;
}
.ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
<div class="a">Wow,CSS is very very very very very cool !</div>
<hr />
<div class="a ellipsis">Wow,CSS is very very very very very cool !</div>
|
效果图如下：
这时候变成三行后再省略也相当简单，直接将 -webkit-line-clamp 变成 3 就行了。
3、特别特别需要注意的是，如果遇到丧心病狂的测试，他会给出一长串连续的英文字符，那么以上代码有可能会失效，这时候就需要word-break: break-all; 来帮助我们，参考如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<style>
.a {
width: 100px;
border: 1px solid gray;
}
.break {
word-break: break-all;
}
.ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
<div class="a">ssssssasjdjdfjsdfksdfgksdfgskdfgskjdfksdf</div>
<hr />
<div class="a ellipsis">ssssssasjdjdfjsdfksdfgksdfgskdfgskjdfksdf</div>
<hr />
<div class="a break ellipsis">ssssssasjdjdfjsdfksdfgksdfgskdfgskjdfksdf</div>
<hr />
<div class="a break">ssssssasjdjdfjsdfksdfgksdfgskdfgskjdfksdf</div>
|
效果图如下：
五、word-wrap 和 word-break 的区别
1、word-wrap 和 word-break 都能使过长的字符串断开，防止其溢出，那他们两的区别又是什么呢？
2、我们先从MDN文档里了解它们的概要：
CSS 属性 word-break 指定了怎样在单词内断行。
他的属性有：
normal 使用默认的断行规则。break-all 对于 non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。keep-all CJK 文本不断行。 Non-CJK 文本表现同 normal。
CSS 属性 word-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。
他的属性有：
normal 表示在正常的单词结束处换行。break-word 表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被被分割的单词会被强制分割换行。
3、仅仅看解释并不能看出什么头绪，接下来用代码来演示他们的差异，代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<style>
.a {
width: 100px;
border: 1px solid gray;
}
.break {
word-break: break-all;
}
.wrap {
word-wrap: break-word;
}
</style>
<div class="a">you are vvvvvvvvvvvvvvvvvvvvvvvery beautiful!</div>
<hr />
<div class="a break">you are vvvvvvvvvvvvvvvvvvvvvvvery beautiful!</div>
<hr />
<div class="a wrap">you are vvvvvvvvvvvvvvvvvvvvvvvery beautiful!</div>
|
效果图如下：
我们发现，当使用word-wrap: break-word;时，如果这个时候文本溢出，它会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话才会进行单词内的断句。而使用word-break:break-all时，他会直接进行单词内的断句。
