文字省略号demo

1、限制单行文本超出显示省略号

限制单行文本超出显示省略号限制单行文本超出显示省略号限制单行文本超出显示省略号限制单行文本超出显示省略号限制单行文本超出显示省略号

               .textEllipsis{
                  width: 165px;
                  height: 30px;
                  line-height: 30px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  font-size: 14px;
               }

2、限制多行文本超出省略号

限制多行文本超出省略号限制多行文本超出省略号限制多行文本超出省略号限制多行文本超出省略号限制多行文本超出省略号

               .moreText{
                  overflow : hidden;
                  text-overflow: ellipsis;
                  white-space: normal;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
               }

3、限制块文本省略(1)

前端

苏州是江苏的

江苏是中国的也是世界的

前端

苏州是江苏的

江苏是中国的也是世界的

                  .blockExc {
                     width: 330px;
                     padding: 5px 0;
                     white-space: nowrap;
                     overflow: hidden;
                     text-overflow: ellipsis;
                  }
                  
                  .blockQute .block {
                     display: inline;
                     border-radius: 4px;
                     background: #1c8a95;
                     color: #Fff;
                     padding: 4px 10px;
                     font-size: 15px;
                  }

4、限制块文本省略(2)

前端

苏州是江苏的

江苏是中国的也是世界的

前端

苏州是江苏的

江苏是中国的也是世界的

                  .blockExc {
                     width: 330px;
                     padding: 5px 0;
                     white-space: nowrap;
                     overflow: hidden;
                     text-overflow: ellipsis;
                  }
                  .blockFxc .block {
                     display: inline-block;
                     border-radius: 4px;
                     background: #1c8a95;
                     color: #Fff;
                     padding: 4px 10px;
                     font-size: 15px;
                  }

4、限制块文本省略(IOS兼容)

前端

苏州是江苏的

江苏是中国的也是世界的

前端

苏州是江苏的

江苏是中国的也是世界的

                     .blockIos {
                        width: 200px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: normal;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                     }
                     .blockIos  .block {
                        display: inline-block;
                     }

5、用CSS动画实现省略号动画

用CSS动画实现省略号动画

               .point:after {
                  overflow: hidden;
                  display: inline-block;
                  vertical-align: bottom;
                  animation: ellipsis 2s infinite;
                  content: "\2026";
               }
               @keyframes ellipsis {
                  from {
                        width: 2px;
                  }
                  to {
                        width: 15px;
                  }
               }

6、CSS3方格图案

               .fg {
                  background-color: white;
                  background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
                  linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
                  background-size: 100px 100px;
                  background-position: 0 0, 50px 50px;
               }

7、CSS3圆点图案

               .round {
                  background: radial-gradient(circle, white 10%, transparent 10%),
                  radial-gradient(circle, white 10%, black 10%) 50px 50px;
                  background-size: 100px 100px;
               }

8、CSS实现网格背景

               .grid{
                  background:#ccc;
                  background-image: linear-gradient(white 0px,transparent 0),
                  linear-gradient(90deg, white 0px,transparent 0),
                  linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),
                  linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0);
                  background-size:75px 75px,75px 75px,15px 15px,15px 15px;
               }