CSS小套路

2017-10-25  本文已影响0人  饥人谷_小侯

1.中文左右对齐

span{
      padding-top:8px;
      padding: 4px;
      display: inline-block;
      width: 5em;
      text-align: justify;
      overflow: hidden;
      height: 20px;
    }
    span::after{
      content: '';
      display: inline-block;
      width: 100%;

2.使文档中的单词遇见换行折断:

word-break: break-all

3.单行文本溢出省略:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

4.多行文本溢出省略:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

5.如何制作一个1:1的div:

.box  {
     border: 1px solid red;
     padding-top: 100%;
}
上一篇下一篇

猜你喜欢

热点阅读