首頁 > web前端 > 前端問答 > css可以取消橫向捲軸嘛

css可以取消橫向捲軸嘛

青灯夜游
發布: 2022-04-25 19:22:52
原創
4668 人瀏覽過

css可以取消橫向捲軸,只需在捲軸的父元素中加入overflow-x屬性,並將屬性值設為「hidden」即可,語法為「父元素{overflow-x: hidden ;}」;此方法可設定當內容溢位左或右邊緣時不提供捲動機制,直接裁切內容。

css可以取消橫向捲軸嘛

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

css可以取消橫向捲軸

在css中,可以使用overflow-x屬性來刪除橫向捲軸。

  • overflow-x 屬性規定當元素溢出內容區域,是否對內容的左/右邊緣進行裁切

  • 當屬性值設定為「hidden」時,設定當內容溢位左或右邊緣時不提供滾動機制,直接裁切內容。

範例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div {
width: 1400px;
}
</style>
</head>

<body>
<div>
很长的内容...
</div>
</body>

</html>
登入後複製

css可以取消橫向捲軸嘛

#可以看到出現橫向捲軸。

為了隱藏這個捲軸,我們可以為捲軸元素(溢出元素)的父元素設定overflow-x 屬性。這裡就是body元素

body{
	overflow-x: hidden;
}
登入後複製

css可以取消橫向捲軸嘛

可以看到頁面上的捲軸已經沒有了。

說明:這種方法隱藏的捲軸,當內容很長,是會把部分內容也隱藏掉的,因為要考慮好,最好設定一個最大的寬度,讓其自動換行。

body{
	overflow-x: hidden;
	max-width: 1000px;
}
登入後複製

(學習影片分享:css影片教學web前端

以上是css可以取消橫向捲軸嘛的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板