设置当内容超出div（文字长度超出div宽度）出现滚动条

当内容超出div时，自动出现滚动条的条件

1. 内容必须在div中

2. div要设置宽高

3. overflow设置为auto

备注

• overflow:auto;当内容宽度超出div宽度，或者内容高度超出div宽度，或者同时超出，会自动出现水平、或者垂直、或者水平和垂直滚动条。
• overflow-x:auto;当内容宽度超出div宽度，自动出现水平滚动条
• overflow-y:auto;当内容宽度超出div高度，自动出现垂直滚动条

注意

• 当div中的内容是文字时，当文字长度超出div宽度时是不会出现横向滚动条的，即使设置了overflow:auto;或者overflow-x:auto;。原因是当文字长度超出div宽度时，会自动换行。
• 解决办法：在设置了overflow:auto;或者overflow-x:auto;的同时，还得设置white-space:nowrap;。white-space:nowrap;会强制文字在同一行显示，直到遇到<br />换行标签
• 效果图如下