34、溢出与裁剪

  • overflow 属性指定当一个块级元素的内容溢出了元素的BOX时是否裁剪。
  • overflow
    属性的值为：visible（不裁剪）、hidden（隐藏）、scroll（出现滚动条）、auto（需要时出现滚动条）
  • overflow-x 属性控制水平方向的溢出，属性值同 overflow 。
  • overflow-y 属性控制垂直方向的溢出，属性值同 overflow 。
  • text-overflow 属性指定当文本溢出包含它的元素，应该发生什么。
    属性值为：clip（剪辑文本）、ellipsis（呈现省略号("...")代表剪切文本）、string（呈现
    给定字符串来表示剪切文本）

例：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div {
  width: 200px;
  background: #ff9;
  white-space: nowrap; 
  overflow: hidden; 
}
#text1 { text-overflow: clip; }
#text2 { text-overflow: ellipsis; }
div:hover { overflow: visible; }
</style>
</head>
<body>
<div id="text1">这是一条很长很长的长文本，长到此处放不下。</div><br>
<div id="text2">这是另一条很长很长的长文本，此处完全放不下。</div>
</body>
</html>

盒子内的文本是：这是一条很长很长的长文本，鼠标覆盖在黄色盒子上，就会弹出超出盒子的文本“长到此处放不下”。
![图片说明](https://uploadfiles.nowcoder.com/images/20200605/171901592_1591360173045_6DF8F98A31A9B9ED2767F27F69BB15B0 "图片标题")

35、CSS 尺寸属性

  • height 设置元素高度。
  • max-height 设置元素的最大高度。
  • max-width 设置元素的最大宽度。
  • min-height 设置元素的最小高度。
  • min-width 设置元素的最小宽度。
  • width 设置元素的宽度。