css常用填坑

时间：2015-10-16 14:53:27 阅读：255 评论：0 收藏：0 [点我收藏+]

标签：

1、文本溢出显示省略号：

1.1单行文本、

1 .inaline {
2      overflow: hidden;
3      white-space: nowrap;
4      text-overflow: ellipsis;
5 }

1.2多行文本、

1 .intwoline {
2      display: -webkit-box !important;
3      overflow: hidden;
4      text-overflow: ellipsis;
5      word-break: break-all;
6      -webkit-box-orient: vertical;
7      -webkit-line-clamp: 2; //多少行
8 }

2、不定宽高的水平垂直居中

2.1、直接设置在该元素上

1 selector {
2 　　position: absolute;
3 　　top: 50%;
4 　　left: 50%;
5 　　z-index: 3;
6 　　-webkit-transform: translate(-50%,-50%);
7 }

2.2、设置在父容器上

1 .parent{
2 　　justify-content: centent; //子元素水平居中
3 　　align-items: center;  //子元素垂直居中
4 　　display: -webkit-flex;
5 }

3、不可选

1 body {
2      -webkit-user-select: none;
3      -moz-user-select: none;
4      -ms-user-select: none;
5 }

4、超出显示省略号，文字换行

4.1、table：

 1 table {
 2      table-layout: fixed;
 3 }
 4 td {
 5      width: 100%;
 6      word-break: keep-all; //不换行
 7      white-space: nowrap; //不换行
 8      overflow: hidden;
 9      text-overflow: ellipsis; //当对象内文本溢出时显示省略号
10 }

4.2、div， li

兼容IE/Firefox/Chrome

1 div, li  {
2     display:block;
3     white-space:nowrap;
4     overflow:hidden;
5     text-overflow:ellipsis;
6 }

4.3、相关知识点

　　word-break: break-all;内容为英文时，只要没有空格，都会被当作是一个单词，所以不会换行，加上这样式后会折断自动换行。white-space: nowrap;

　　word-wrap: break-word;强制不换行

　　word-break: normal;自动换行

　　word-break: break-all;强制英文单词断行

5、css画实心圆

 1 .redPoint {
 2  　　width: 10px;
 3  　　height:10px;
 4  　　background-color: #f00;
 5  　　border-radius: 5px;
 6  　　-moz-border-radius: 5px;
 7  　　-webkit-border-radius: 5px;
 8  　　position: absolute;
 9  　　right: -10px;
10  　　top: 1px;
11 }

用例：

<td style="position: relative">少时诵诗书</td>

父元素添加 position: relative ，子元素设置right属性为负时，可达到红点随文字长度而改变位置；

若table元素设样式有width： 100%时，可再用span标签包裹,添加 style="position: relative"

<td>少时诵诗书</td>

6、遮罩层

 1 .maskLyayer {
 2     position: absolute;
 3     top: 0;
 4     left: 0;
 5     z-index: 1;
 6     width: 100%;
 7     height: 100%;
 8     opacity: 0.6;
 9     filter: alpha(opacity=60);
10     background-color: #000;
11 }
12 .div {
13     position: absolute;
14     top: 50%;
15     left: 50%;
16     z-index: 2;
17     transform: translate(-50%, -50%);
18     -ms-transform: translate(-50%, -50%);
19     -moz-transform: translate(-50%, -50%);
20     -webkit-transform: translate(-50%, -50%);
21     -o-transform: translate(-50%, -50%);
22 }

css常用填坑

标签：

原文地址：http://www.cnblogs.com/aissd/p/4885134.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

css常用填坑

1、文本溢出显示省略号：

1.1单行文本、

1.2多行文本、

2、不定宽高的水平垂直居中

2.1、直接设置在该元素上

2.2、设置在父容器上

3、不可选

4、超出显示省略号 ，文字换行

4.1、table：

4.2、div， li

4.3、相关知识点

5、css画实心圆

4、超出显示省略号，文字换行