CSS 常用代码锦囊

留言

CSS 常用代码锦囊

  • 三行文本溢出显示省略号
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
.textOverflow3 {
  overflow: hidden;
  position: relative;
  line-height: 1.5em;
  max-height: 4.5em;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
  &:before {
    background: #000;
    content: '...';
    padding: 0 1px;
    position: absolute;
    right: 14px;
    bottom: 0;
  }
  &:after {
    background: white;
    content: '';
    margin-top: 0.2em;
    position: absolute;
    right: 14px;
    width: 1em;
    height: 1em;
  }
}
  • 文本溢出省略
1
2
3
4
5
6
7
8
9
10
11
12
.textoverflow a {
    display:block;
    width:120px;
    margin: 0px 0px 0px 3px;
    white-space: nowrap;
    overflow: hidden;
    float: left;
    -o-text-overflow: ellipsis;     /* for Opera */
    text-overflow: ellipsis;        /* for IE */
}
.textoverflow:after{ content: "..."; }/* for Firefox */
@media all and (min-width: 0px){ .textoverflow:after{ content:""; }/* for Opera */ }
  • 多栏CSS3

使用css3来创建多栏，它可以自适应网页，不兼容IE

1
2
3
4
5
6
7
8
9
#columns-3 {
   text-align: justify;
   -moz-column-count: 3;
   -moz-column-gap: 12px;
   -moz-column-rule: 1px solid #c4c8cc;
   -webkit-column-count: 3;
   -webkit-column-gap: 12px;
   -webkit-column-rule: 1px solid #c4c8cc;
}

See the Pen 2048 game by Cam Song (@camsong) on CodePen.

---

文章目录

  1. CSS 常用代码锦囊