熱情輕鬆地過生活: HTML 元素內容太多造成顯示不正確

2013年9月27日星期五

HTML 元素內容太多造成顯示不正確

在Html中我們常常會在元素中顯示文字，可是如果我們限制了這個元素的長和寬，
而且字數內容又很多已經超過版面的話，就會造成顯示不正確的問題，

所以我們必須靠"overflow"這個屬性來解決這個問題，以下程式碼示範了overflow的使用方式:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
div { width:200px; height:75px; border:3px solid red; white-space:nowrap;}
</style>
</head>
<body>
<div>
<h2>overflow default:visible</h2>
測試文字測試文字測試文字測試文字測試文字測試文字
</div>
<div style="overflow:hidden">
<h2>overflow:hidden</h2>
測試文字測試文字測試文字測試文字測試文字測試文字
</div>
<div style="overflow:auto">
<h2>overflow:auto;</h2>
測試文字測試文字測試文字測試文字測試文字測試文字
</div>
<div style="overflow-x:hidden">
<h2>overflow-x:hidden</h2>
測試文字測試文字測試文字測試文字測試文字測試文字
</div>
<div style="overflow-y:hidden">
<h2>overflow-y:hidden</h2>
測試文字測試文字測試文字測試文字測試文字測試文字
</div>
</body>
</html>

執行的結果會如下圖:

overflow屬性的用法與結果如上面所示，所以就請大家照著自己的需求去使用吧!

沒有留言:

張貼留言

訂閱：張貼留言 (Atom)