在設計網頁時，為了使畫面美觀，會先設計好每一個區塊的寬度，但是區塊內要放的文字長度常常並不是我們能預期的，要是碰到過長的文字，沒好好去處理，輕則從畫面上看起來句子被切掉了，重則讓畫面整個跑版或爆版，那事情可就大條了!
為了防止這種情況發生，我們可以透過 CSS 的一些屬性來處理，當文字的長度超過所設定的寬度時，則會在最後面顯示 … 把多的字省略掉，這樣以後字再多也不怕了。
首先來看看字數太多又沒有好好處理導致爆版的情況，如下所示：
很明顯的可以看到圖片下面的說明文字已經整個跑出框框外面了，整個就是不及格啊!!
再來是看看經過額外處理過後，把多的字元省略掉後的效果，如下所示：
超過設定寬度的字真的都被省略了，還自動出現了 … 來表示有字被省略掉，這種效果相信若是常逛網頁的人應該都有看過吧!
接下來就來看看怎麼做到這個效果吧！
首先我們先準備好一個 div，來裝圖片跟文字，文字則額外再用另一個 div 包起來，HTML 的部份如下：
<div>
<img src="http://picjumbo.imgix.net/DSC02752.jpg?q=40&w=1650&sharp=30" >
<div>
具備劃時代Touch Bar 的MacBook Pro，有13 吋及15 吋機型可供選擇。立即深入了解全新功能並進行線上購買。
<div>
<div>接著就來設定樣式吧，首先設定最外層的容器，指定寬高，這邊我們設定區塊為寬 300px，高 250px，padding:3px，圖片則讓他撐到滿版寬度。
.main{
width:300px;
height:250px;
padding:3px;
border:1px solid #c8c8c8;
}
.pic{
width:100%;
height:auto;
}再來則是重點，要處理放文字的區塊，我們先設定文字區塊的寬度為 280px，這時候文字只要超過 280px 的長度，就會自動換行(區塊元素預設樣式行為)，所以設定寬度是很重要的喔! 接著設定 white-space: nowrap 屬性，讓文字長度超過設定的寬度時不會自動換行，設定 overflow: hidden 屬性使文字長度超過設定寬度時，會將溢出的字隱藏，再來是很重要的點點點，設定 text-overflow: ellipsis 屬性則會幫你帶出 … 省略符號來當結尾，完整的 CSS 樣式如下：
.main{
width:300px;
height:250px;
padding:3px;
border:1px solid #c8c8c8;
}
.pic{
width:100%;
height:auto;
}
.des{
width:280px;
font-size:16px;
margin:0 auto;
margin-top:10px;
font-family: 'Microsoft JhengHei','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
white-space: nowrap; /* 不自動換行 */
overflow: hidden; /* 隱藏溢出字元 */
text-overflow: ellipsis; /* 使用省略符號 ... */
}小提醒： 要是使用非區塊元素，而是行內元素 (例如：span) 時，則要再加上 display : inline-block 屬性。
現在就只要把設定好的 CSS 套用在之前準備好的 HTML 裡，就可以來看看結果啦! 套用樣式後的 HTML 如下：
<div class="main">
<img class="pic" src="http://picjumbo.imgix.net/DSC02752.jpg?q=40&w=1650&sharp=30" >
<div class="des">
劃時代 Touch Bar 的 MacBook Pro，有13 吋及15 吋機型可供選擇。立即深入了解全新功能並進行線上購買。
<div>
<div>這樣就完成嘍，快點一起動手玩看看吧!!
