博客園寫作避坑指南【持續更新】
阿新 • • 發佈:2019-03-22
white 無法識別 英文單詞 分享 頁面 done 正常 code don 的設置下無法自動斷行,導致超出容器寬度,表格的大部分都無法正常顯示。
以下是花了一晚上調格式之後的血淚經驗,如果之後有新的發現會持續更新……
關於英文單詞自動斷行
如果你和我一樣需要寫英文博文,你會發現遇到行尾的英文單詞全部被攔腰截斷,看上去怪怪的。
這是因為博客園默認模板CSS將mainContent
設置為word-break:break-all
,即強制斷行。
好在博客園開放了頁面定制CSS代碼,我們可以很方便地加入自己的設置來覆蓋掉默認設置,只需要在“設置 -> 頁面定制CSS代碼”中加入以下代碼:
#mainContent {
word-break: normal;
}
現在,是不是看上去好多了?
但是,在某些情況下,強制斷行可能還是需要的。例如,我的文章中還插入了表格,表格中每一列都是超長的GUID,在word-break: normal
那我們就單獨為表格設置強制斷行吧:
#cnblogs_post_body table, .cnblogs-post-body table {
word-break: break-all;
}
Done!
總之,通過F12查看CSS代碼定位到你需要更改樣式的元素,然後根據需要修改就可以了。
附:
強制不換行:{white-space: nowrap;}
自動換行:{word-wrap: break-word;word-break: normal;}
強制英文單詞斷行:{word-break: break-all;}
關於Markdown編輯器
以下是一些瑣碎的、可能並不會遇到、但是遇到了會很抓狂的小坑。
- 代碼塊前面的```必須無縮進,否則無法識別為代碼塊,或出現識別混亂。
- 代碼塊後面的```可以縮進,但和前面的```相差不能超過一個tab。
- 表格前必須有空行,否則無法識別為表格。
- 有序列表之間插入代碼塊會使代碼塊之後重新從1開始計序。通常這個問題可以通過在代碼塊前加tab解決,但由於博客園的Markdown還存在第1條所述問題,目前還沒有找到完美解決辦法。。如果有知道的小夥伴希望可以分享一下(?ω?)
博客園寫作避坑指南【持續更新】