資料載入中

胡言亂語

破版,很醜


破版很醜
破版......很醜對不對!!

我想這是所有從事網頁設計師的痛~

這時你需要的是可以輕輕鬆鬆協助你過關的CSS

文字強迫換行
word-break: break-all;

使用方式
.divname
{
background-color: #e0ebee;
width: 100%;
max-width:600px;
word-break: break-all;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 0px; 
}

注意~max width 600px,這表示最寬你給我到600px就好就給我強迫換行~

當然,若排版需要,你還可以有其他選擇~

依單字換行
word-wrap:break-word;

使用契機?

若使用文字強迫換行,太長的英文字,會自動切成兩半。

這時就得使用依單字換行方式~

另外.......

還有一個,死都不要給我換行的選擇。
white-space:nowrap;

請審慎使用之~

  • 網頁設計師的CSS使用技巧
  • 文字強迫換行的最佳實踐
  • 如何設定max width以避免排版問題
  • 依單字換行的使用情境
  • 避免不必要的換行設計選擇
https://innstory.com/story-破版很醜-1690

上一篇
 javascript獲取當前時間

下一篇
分享有神快拜!日手作達人做出會寫時間的機器人手錶超精緻根本可以直接拿去賣!風傳媒 

發表留言

  • 蔡羽庭

    哈哈,網頁設計的煩惱真是太真實了!強迫換行挺關鍵的。
    2026-10-14 上午 8 點回覆
  • 米蘭達

    網頁設計真的是一門技術活,特別是排版部分。遇到強迫換行的問題,確實會讓人頭疼。看來選擇合適的CSS方法很重要,否則文字排版就會變得很麻煩。
    2026-07-14 下午 12 點回覆

作者簡介

離不開電腦的宅男


推薦閱讀

作者其他相關類別故事

mysql 查詢數據資料是否有重複

mysql 查詢數據資料是否…

Mark Chang 8 年又 200 天 2.6K

有沒有試過資料庫裡上萬筆資料卻不知道是不是有重複的數據? 這時你一定要試試這個查詢方法~  

使用curl執行POST請求

使用curl執行POST請求

Mark Chang 7 年又 332 天 2K

curl命令是一個利用URL規則在命令行下工作的文件傳輸工具。 支持文件的上傳和下載。 這邊範例使用...

javascript如何通過其 ID 設置選擇元素的選定選項?

javascript如何通過…

Mark Chang 3 年又 316 天 1.4K

如題,透過javascript來針對某個select的option來做選定。 或者 或者 以上紀錄~...