css 溢出元素显示滚动条

CSS是用来装饰HTML元素的语言，既然它有样式，那肯定会有超出元素的部分，这时候就会用到溢出元素

当元素超出边界时，我们可以通过使用CSS的overflow属性来处理。它有几个不同的值:

  .scroll {
        overflow: scroll;
     /* 显示滚动条 */    overflow: auto;
     /* 需要时显示滚动条 */    overflow: hidden;
     /* 超出部分被隐藏 */    /* 如果想要元素的内容换行，元素高度随着内容增加，可以使用以下值 */    overflow-wrap: break-word;
        word-wrap: break-word;
  }
    

以下是示例代码:

  div class="scroll">
        p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod erat vitae suscipit congue. Integer euismod ipsum eget molestie malesuada. Nam eu orci vel augue accumsan gravida vitae vel lectus. In mattis neque ut justo pellentesque elementum. Nullam aliquam sapien vel nunc pretium, eget mollis lacus volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
     Donec gravida est sit amet vestibulum rutrum. Curabitur tristique, purus ut elementum tincidunt, nulla velit commodo velit, eget maximus mauris sapien id tortor. Nam laoreet turpis sit amet sapien efficitur ornare./p>
      /div>
    

上面的代码演示了当内容超出div元素的宽度时，如何使内容变成可滚动的。可以看到我们通过为父元素添加class="scroll"并设置overflow:scroll，使元素的超出部分可滚动。

使用overflow属性可以让我们更好地控制HTML元素的内容，确保它们在不同屏幕大小和分辨率下都能显示良好。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！