[問題] 請問網頁左邊文字為什麼會推寬格子大小

[dream1124 (全新開始)]

  晚安

  我會寫 javascript, 知道 html 標籤的用法, 但不太熟 CSS 和排版

  想請問大家方便幫忙看一下為什麼這個靜態網頁的左邊 Executed Gradle Task
  那個 table 區域明明就在 sidebar 的 div 裡面，卻會因為 table li > a
  裡面的文字太長而向右凸出去？

  https://drive.google.com/file/d/0B8d7WRHnGxbRZlg1M2JoYVR3Z0E/view

  為了讓這個區域不會因為文字很長而凸出去，我有試著在 jsfiddle 上面
  盡量模擬網頁的情況，使用 word-wrap:break-word; 把錨點裡的文字斷行，
  結果在下面連結中。

  http://jsfiddle.net/f2pkhde6/

  但令我不解的是為什麼一樣的技巧拿去原本的網頁就完全沒用呢？
  就算設定 table 的樣式包含 word-wrap:break-word 還是沒效，
  請問是什麼 CSS 的排版設計讓 table 的寬度不動如山呢？

  謝謝大家的解答

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 61.231.184.90
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1440257374.A.96F.html
※ 編輯: dream1124 (61.231.184.90), 08/23/2015 01:04:48
→ superpai: 你就 td 裡面再夾一層 div上 word-wrap:break-word
→ miau: 你沒有模擬網頁的情況啊XD 跟網頁一樣加上 table 的話也是爆
→ miau: 在 a 加上 word-break: break-all; 即可達成你的需求
→ miau: 另外你的 li 外層沒有包 ul 或 ol，是不正確的 html 寫法喔
→ miau: http://jsfiddle.net/f2pkhde6/1/ 給你參考 ._.
 謝謝兩位, 問題就差不多解決了

 原本網頁的 li 外面沒有加上 ul 或 ol，我猜是因為原作者想讓清單的黑點盡量靠左。
 如果套上 ul 或 ol 的話，黑點左邊還會多出一些 padding。

 其實這也是我現在想解決的問題，請問要怎麼做才能讓清單的黑點
 在側邊欄、甚至整個頁面在不同螢幕上時都能靠近清單那個區域左邊框呢？
 我知道 padding-left 然後填比例可以做到，不知道這能不能適用大小不同的螢幕。

 http://jsfiddle.net/f2pkhde6/2/
※ 編輯: dream1124 (118.160.80.226), 08/23/2015 14:24:10