資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法律學使用 JavaScript 讓內容溢位時應如何處理內容左右邊緣？
若內容溢位，解決左右邊緣問題並設定滾動，可以透過 overflowX 屬性進行解決。新增捲軸可讓訪問者輕鬆閱讀全部內容。
示例
可以嘗試執行以下程式碼，瞭解使用 JavaScript 讓內容溢位時應如何處理左右邊緣 −
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 350px;
height: 150px;
background-color: orange;
border: 3px solid red;
white-space: nowrap;
margin-left: 20px;
}
</style>
</head>
<body>
<p>Click to use overflow property and set scroll.</p>
<button type="button" onclick="display()">Set Scroll</button>
<div id="box">
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
</div>
<br>
<br>
<script>
function display() {
document.getElementById("box").style.overflowX = "scroll";
}
</script>
</body>
</html>
更新日期：2020-06-23
53 次瀏覽
廣告