CSS-Cheatsheet2020-09-24 21:52Dev, CSS

文本

文本超出长度显示省略号

/* CSS */

.overflow {
  width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

Layout

Flex 实现上中下结构

  #wrapper {
    width: 400PX;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  #content {
    flex: 1;
  }

  #footer {
    height: 100px;
    background-color: black;
  }

如果排列的元素比较多, 还可以这样设置:

/* 无论如何要先把外面这一个 设置成 竖向排列 */
#wrapper {
  width: 400PX;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

#header {
  flex: 1;
}

#menu {
/* 这个地方设置一个非常大的值, 令它自动控制高度 */
  flex: 100;  
}

footer {
  flex: 1;

}
Powered by Remix
|
Designed by szhshp
|
Copyright © szhshp 2022