什麼是跑版？跑版，簡單來說，畫面不是你預期，東西待在它不該待的地方，畫面不忍直視，有興趣可自行查詢關鍵字。事情是這樣得，隨著每次Code Review做調整後，開始會好奇所以把版切好是什麼意思？

切好？寫好？

小白如我勇敢地發問了，所以切好版是什麼？饅頭驚訝地看著我說『你有這個困擾是嗎？』我回，是不是結構要寫好，不要牽一髮動全身啊？他說那是寫好啦！切好當然是跟設計稿要一致。

這讓我回想到初次震撼教育的切版Code Review，饅頭說，假裝你是設計師跟我說說這畫面是怎樣排，我懷疑地對他說，我又沒當過設計師，好不容易把一堆什麼ＢＯＸ的塞進腦袋。他說，不然你把那些術語都不要用，用平常的話來描述。那次的經驗讓我知道，不可以全都術語術語的，要學習切換，這樣以後才可以跟更多人協作溝通，才能更明白要怎樣切才符合人家的真實需求。

簡單總結我對切好寫好的理解，

切好，指的是網頁呈現與設計稿一致，需要理解設計師的設計思維，以便能夠更好地寫出符合設計需求。

• 確保網頁元素的排列與設計稿一致。
• 理解設計師的意圖，以更好地實現設計要求。
• 防止跑版問題，確保內容不會超出指定的範圍。

寫好，則關注如何編寫，使其易於維護和擴充，提高的可讀性和可維護性。

• 避免過多使用div和定位定死，而是使用適當的HTML元素和CSS布局。
• 需要時，根據具體情況選擇不同的寫法，而不是僅僅一種方式。
• 好維護，好擴充，使其能夠適應未來需求的變化。

常用的防爆機制

以下簡單分享常用的防爆機制，主要針對『圖片』和『文字』。當然還有更多，如果各位讀者有很棒的方法，有很歡迎在下方留言，一起交流交流喔！

文字

對於文字太多的情況，可以使用CSS屬性，如text-overflow、overflow和white-space，來實現文字的收起和省略。可以使用-webkit-line-clamp來限制文字顯示的行數，並在超過一定行數時顯示省略號。

超過尺寸就....

p{
  width: 200px;
  border: 1px solid #000;
  （設定框框尺寸和可見邊框）
  
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  （超過尺寸就....）
}

多少行後....

p{  
  width:200px;
  border:1px solid #000;
  （設定框框尺寸和可見邊框）
  
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
  (選擇要出現2行，超過的會...)
}

更多參考：

• MDN text-overflow
• MDN overflow
• MDN white-space
• MDN -webkit-line-clamp

圖片

對於圖片的尺寸調整，可以使用object-fit屬性，並在外層包裝一個<div>元素，設定所需的尺寸，然後在<img>元素上應用object-fit。這樣可以讓圖片在不同情況下都能正確顯示，而不會失真或拉伸。

html結構
<div class="img_box">
<img src=".....">
</div>

<style>
.img_box{
width:100px;
height:100px;
}

img{
width:100% ; 
height:100%;
object-fit:cover;
}
</style>

• 更多參考：MDN object-fit

畫面

為了畫面不會無限大或無限小，可以使用max-width和min-width等CSS屬性來設定畫面的最大和最小尺寸。可以參考不同螢幕尺寸的標準(ex:https://screensiz.es/ )，來確定適合的尺寸範圍，以確保網頁在各種設備上都能正確顯示。

• 更多參考：螢幕尺寸相關觀念整理

小結

隨著技術的深入與專案複雜度提升，可能會出現更多細節值得被探究，有機會再跟大家分享啦！