Formating Preformated Text on Your Website formating preformated文本在您的網站
August 6th, 2007 · by David Bradley 2007年8月6日,大衛布拉德利
On occasion, I have used the html <pre> tab to preformat an error message or other standout text in a post.有時,我用的HTML <pre>標籤preformat錯誤訊息或其他standout文本在後。 At least one Sciencetext reader was intrigued as to how I managed to wrap the text rather than it being displayed right across the post area or with a horizontal scrollbar.至少有一個sciencetext讀者是推出的至於如何我設法用文字,而不是它顯示的權利,全國郵政地區或一個水平滾動條。
Well, there is a very simple CSS hack.那麼,有一個很簡單的CSS技巧。 Open up your stylesheet (be sure to make a backup first) and add this code to the bottom.打開你的樣式表(一定要備份第一)和將此代碼添加到底部。
/* Browser specific (not valid) styles to make preformatted text wrap */ / *具體的瀏覽器(無效)風格,使預先設定的文字總結* /
pre {前(
white-space: pre-wrap; /* css-3 */白領空間:預包裝; / *的CSS - 3 * /
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */白領空間: -萬盎司預包裝; / * Mozilla中,自1999年以來, * /
white-space: -pre-wrap; /* Opera 4-6 */白領空間:預包裝; / *歌劇4-6 * /
white-space: -o-pre-wrap; /* Opera 7 */白領空間: -鄰前的總結; / *歌劇7 * /
word-wrap: break-word; /* Internet Explorer 5.5+ */字總結:打破字; / * Internet Explorer 5.5以上版本* /
} )
Save the sheet and refresh the page on which you are using the preformated chunk of text, it should now be wrapping better than Ice T. There are various other ways to implement this保存資產負債表和刷新頁面上,您正在使用preformated大塊文本,現在應該有包裝優於冰湯匙,有各種其他方式來實施這一 hack哈克 , but this is the quickest and easiest. ,但,這是最快和最容易的。 You can also add other CSS tags to change the font size, for instance, so that the preformated block of text doesn’t look so clunky.您還可以添加其他的CSS標記來改變字體大小,舉例來說,使該preformated文字區塊看來並不樂觀,使笨重的。 The Sciencetext stylesheet for instance includes font-size:0.9em; to reduce the font size to 90%, which makes it look a little more stylish.該sciencetext樣式表,例如,包括字體大小: 0.9em ;減少字體大小至90 % ,這使得它看起來一點,更時尚。 You could add borders, change the font, in fact apply all kinds of special formating.你可以添加邊框,更改字體,在事實上適用於各種特殊formating 。 Just remember it will apply site wide to all pre text if you add the code to the stylesheet.只是沒有記錯的話,將適用於網站廣泛,所有學前教育文字如果您的代碼添加到樣式表。






















2 responses so far ↓ 2反應到目前為止↓
Hsien Lei 賢雷 // / / Aug 9, 2007 at 10:31 am 2007年8月9日在上午10時31分
I couldn’t access the Deleting Stubborn Files post and I have one I want to delete too!我不能訪問刪去頑固文件後和我有一個我要刪除太多!
David Bradley 大衛布拉德利 // / / Aug 9, 2007 at 12:07 pm 2007年8月9日在下午12時07分
The “deleting stubborn files” post Hsien mentions will appear formally on Aug 10, it got pre-post-dated in this item in error, I’ve removed the link for now… “刪去頑固文件”後賢提到,將正式出現在8月10日,獲得前郵政過時,在這個項目中的錯誤,我已刪除了鏈接,現在…
Leave a Comment留下意見