熱情輕鬆地過生活: 透過 overflow 及 white-space 屬性來讓過多的資料內容用 "..." 顯示

2013年11月28日星期四

透過 overflow 及 white-space 屬性來讓過多的資料內容用 "..." 顯示

先前提過一些關於overflow的用法了，但是有時候有些無關緊要的文字卻讓他有scrollbar實在又不太好看，這時候可以再搭配text-overflow及white-space屬性來處理這種情況。

這兩個屬性再搭配overflow主要的用途是將過多的資料來用 "..."來顯示，如下圖:

實作方式如下段程式碼:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.title { overflow:hidden;
width:300px;
border:2px solid #f00;
text-overflow:ellipsis;
white-space:nowrap }
</style>
</head>
<body>
<div class="title">
這是一個用來測試Overflow顯示的範例唷!這是一個用來測試Overflow顯示的範例唷!
</div>
</body>
</html>

沒有留言:

張貼留言

訂閱：張貼留言 (Atom)