1,单行文本居中显示
- 对于单行文本的水平居中,最常用的就是设置text-align:center即可。
- 单行文本垂直居中,最常用的就是设置行高line-height和容器的高度height等值即可。
- 有些时候容器的高度没有固定,那么通常就是设置padding-top和padding-bottom来使其居中。
- 不管是多行还是单行,都可以使用下面的方法来使其垂直居中
.test{
width: 200px;
height: 100px;
border: 1px solid #ff8200;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
<div class="test">
千里之行,始于足下
</div>
对于目前chrome版本 47.0.2526.80 (64-bit)的浏览器和FF 44.0.2都支持display:flex 和 align-items属性,不需要加各自的前缀。由于机器上未安装ie,所以没有亲测。
2,多行文本居中显示
- 对于多行文本的垂直居中显示,除了使用上面的方式外,也可以用如下方式
#div{
width: 50px;
height: 30px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
3,超过一行,最后面显示省略号
- 超过一行用省略号显示,大家都应该知道了,关键代码如下
.ellip{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#test{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
width: 200px;
// 下面两行是处理长文本单词或数字不换行问题
word-wrap: break-word;
word-break: break-all;
}
4,超过两行,第二行最后面显示省略号
最近在搞一个手机端的项目,很多页面都要求超过2行后用省略号显示,一下子有点懵。经过一番搜索,终于找到了一个适合移动端的解决方案。
#test{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
width: 200px;
}
关键代码已经用红色标出。由于目前该属性只有谷歌浏览器支持,所以对于做移动端的小伙伴来说是个不错的选择。
但是移动开发的小伙们别高兴的太早,在本人捣鼓的过程中,发现了一个问题:如果对于输入的字符都是汉子,没有问题。但是如果输入的都是英文或数字等,那么上面的方法就不是很起作用了。
实际上内容已经超过了2行,但是却只显示一行,并且使用裁剪方式显示。
这是因为对于长文本英文或者数字,只是这样的设置还不行,还需要这样处理下
word-wrap: break-word;
word-break: break-all; // 这两行用来处理长文本单词或者数字
当然了,你也可以使用jquery的一款插件jquery.dotdotdot.js来搞定了超过2行显示省略号的问题。
5,元素居中显示
- 元素居中显示。最常用的使一个块状元素居中显示,可能就是使用margin-left:auto;margin-right:auto这种方法了。
- 对于css3如此强大的今天,我们可以使用如下方法来使一个元素或者多个元素居中
#container{
display: box;
display: -webkit-box;
display: -moz-box;
width:300px;
height: 200px;
margin: 50px 20px;
border: 1px solid #ccc;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-align:center;
-moz-box-align:center;
}
#div1{
background: orange;
}
#div2{
background: yellow;
}
#div3{
background: green;
}
#div1,#div2,#div3{
width: 50px;
height: 30px;
}
关键代码已用红色标出。测试结果如上图。
目前该属性所有的浏览器都不支持,使用的时候必须加上各自的前缀。
需要注意的是:以上红色标出的代码是使用在父级元素上的,他使子级元素水平垂直居中。居中的是子级元素,而不是元素内的文本。
完结