div 加滾動條 超過div寬度 自動換行 div居中

一、div 中加滾動條

一、

<div style=" overflow:scroll; width:400px; height:400px;”></div>

記住寬和高一定要設置噢，否則不成的

不過在不超出時，會有下面的滾動條，所以不是最好的選擇

 

二、

<div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div>

記住寬和高一定要設置噢，否則不成的

這樣比較好的是，在寬和高不超出時，只是一條線

三、說明

直接為div指定overflow屬性為auto即可，但是必須指定div的高度，如下：

<div style="position:absolute; height:400px; overflow:auto">

</div>

如果要出現水平滾動條，則： overflow-x:auto

同理，垂直滾動條為： overflow-y:auto

如果該div被包含在其他對象例如td中，則位置可設為相對：position:relative

 

 

 

 

 

 二、超過div寬度 自動換行

一、word-wrap: normal|break-word（word-wrap 屬性允許長單詞或 URL 地址換行到下一行）。

1、normal ，只在允許的斷字點換行（瀏覽器保持默認處理，默認值）。

2、break-word， 在長單詞或 URL 地址內部進行換行。

二、word-break: normal|break-all|keep-all（通過使用 word-break 屬性，可以讓瀏覽器實現在任意位置的換行）。

1、normal 使用瀏覽器默認的換行規則。（默認值）

2、break-all 允許在單詞內換行。

3、keep-all 只能在半角空格或連字符處換行。

word-break: break-all;
word-wrap: break-word;

 

 

 

三、div  居中

.xxxx{
 width:900px;
 height:800px;
 margin:0 auto;
}

1. 必須  明確給出 高寬  【px,,,】
2. 如果是父元素 的高或寬 以像素的形式 明確給出后，該元素相應的 高或寬 可以用 %