SIG的无花果首页SIG的无花果新闻SIG的无花果通过电子邮件SIG的无花果最热门的职位
重要人物
Helping you, by helping myself with blogging, browsing, and tech tips 帮助您,帮助自己与博客,浏览和高新技术的秘诀

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反应到目前为止↓

Leave a Comment留下意见

Comments are checked for spam before appearing, no need to post it twice.评论是检查垃圾邮件之前出现,不需要后两次。

Related Posts相关文章