http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/
sometimes display little snippets of code on this site. For example, here, here, and here. To do this, I use the Code Markup wordpress plugin.
If you’re using Firefox, you may notice the long lines in my Digg Integrator fix post. It’s not really a problem for me having those really long lines in Firefox. Why? Because Firefox still displays my sidebar correctly. Internet Explorer is a totally different story though. When there’s long lines like that, my sidebar will appear at the very bottom of the page in IE.
The long lines are caused by use of the pre html tag. The pre tag preserves spaces and line breaks in a chunk of text. Perfect for displaying snippets of code. However, some lines of code are quite long and will run off the page. This is exactly why my sidebar was getting pushed to the bottom of the page in IE.
So, I set out looking for a method to wrap text contained within pre tags. Google found exactly what I was looking for. Wrapping text inside pre tags is quite easy, all that’s required is a simple addition to your css:
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Quite simple. After adding that CSS, the text in pre tags still doesn’t wrap in Firefox, but I don’t care because Firefox displays the rest of my page as it should. Now, when you view a page in IE with a long line, the text is wrapped and my sidebar content appears at the top of the page instead of the bottom.
For consistency sake, let’s make these long lines wrap in Firefox too. This is extremely simple. It only requires adding a few characters to the CSS shown above. For text wrapping in Firefox, use this CSS:
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Notice the only difference between the first and second examples is the addition of “!important” to the third line in example 2. After adding that little bit, your text between your pre tags should wrap well in basically every browser that’s currently in use.
If you can’t seem to get the css above to work, give the css below a shot. I just set a width on the pre tag. When the width is set to 100%, you’ll get a horizontal scrollbar when viewing in IE7. That’s why I’ve set the width to 99%. The code will display just fine in IE6, IE6, and FireFox when width is set to 99%. I have not tested Opera. Try this updated CSS if you’re having issues with the original CSS from above.
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
width: 99%;
}
Markku Laine posted some css in a comment that seems to work better than the original css I posted. It works in IE, Safari, and FireFox. Try using Markku’s css below if the previous examples don’t work for you.
pre {
overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
/* width: 99%; */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Certification exams from cisco like 350-001 and 640-802, also from the other vendors like Microsoft having similar exams 70-290 and 70-291 along with lesser known vendors Vmware VCP-310 can help you brush up your skills on networking as well as web skills
分享到:
相关推荐
Dynamic Time Wrapping的源代码
WrappingViewPager ViewPager replacement with dynamic height support and smooth animations ... compile 'com.github.iffa:wrapping-viewpager:1.10' } Quick start Integrating the library takes less than f
曲波变换程序代码,实现图像的曲波分解以及显示,可以去图像进行曲波去噪增强,对彩色图像空间模型转化后提取曲波信息
fdct_wrapping_dispcoef - 返回一个包含所有图像曲波系数的图象
text wrapping, and the direction of text flow.This book is an excerpt from the upcoming fourth edition of CSS: The Definitive Guide. When you purchase either the print or the ebook edition of CSS ...
This paper discusses the temporary objects and the handle maps mechanism, which MFC uses to provide a uniform method for ...object handle allocated by an API call and the C++ MFC object wrapping it.
wrapping curvelet demos in matlab
AesKeyWrappingKey2019加密套件上下文存储库(aes-key-wrapping-2019-context) 适用于JavaScript的AesKeyWrappingKey2019加密套件的JSON-LD上下文。 目录 背景 另请参阅(相关规格): 安装 需要Node.js 12+ 要...
In situ wrapping of the cathode material in lithium-sulfur batteries
Unity Premium Learn Course -Advance Programming - Closing the Loop 完整资源。这个资源基本上是剑铲示例游戏的最终版了。
Swift-API-Wrapping 带闭包的基本 API 包装类(支持 Alamofire) 例子 APIWrapping.sharedManager.get("get", params: nil, success: { (responseObject) -> Void in println(responseObject) // Wrap JSON result ...
语言:English (United States) ... tags:pre { white-space: pre-wrap; }This takes effect immediately on all active pages.I've published the (very short) source code under the Apache 2.0 license.
字符串::包装 用全角字符和ANSI代码包装字符串。... strings = Strings :: Wrapping . new strings . wrap ( "It is not down on any map; true places never are." , 20 ) # => "It is not down on\nany map; true p
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、...
curvelet generation subprogram
在Python中包装自定义VTK类的独立测试/示例。 两者都可以一劳永逸地弄清楚这一点,并在将来有一些参考。 基于VTK 6.2(和OpenGL2模块) CMake命令是从不同的来源和示例中拼凑而成的,例如 来自vtk用户列表的帮助
:bikini: Beautify any code blocks wrapping in <pre> automatically. :dress: Beautify code blocks according to your languages preference. :unlocked: Auto detect what languages that the author defines :...
Fix for text being moved inside formatting off comment tags (Forum post) Support ticket 76423: ambiguous columns are now always qualified with their table/alias inside an ORDER BY clause 7.3.0.642 - ...
作者iffa,源码wrapping-viewpager,viewpage替换与动态的高度支持和平滑的动画标准,viewpage的为数不多的边界情况不满足您的需要。