`
hlzhao
  • 浏览: 27003 次
  • 性别: Icon_minigender_1
  • 来自: 常州
最近访客 更多访客>>
社区版块
存档分类
最新评论

Making preformated <pre> text wrap in CSS3, Mozilla, Opera and IE

阅读更多

From: http://myy.helia.fi/~karte/pre-wrap-css3-mozilla-opera-ie.html

 

Code snippets and poems often use spaces for indenting text. Pre-tag is used to display preformatted text on webpages. This makes indenting visible, but has the annoying side-effect of disabling wrapping. When wrapping is disabled, long lines go out of the right side of window, which is never usefull. This howto explains how you can make preformatted text wrap on all browsers when making websites. We also learn how to make pre on any website wrap while browsing the web with mozilla.

Copyright Tero Karvinen www.iki.fi/karvinen .

Contents of stylesheet pre-wrap.css :

/* Browser specific (not valid) styles to make preformatted text wrap */		

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+ */
}

This web page includes the style sheet in head:

 <link rel="stylesheet" type="text/css" href="pre-wrap.css" />

All the code snippets on this page, such as the style sheet above, are inside <pre> tags. See how it wraps by resizing your browser window. (If you make browser window very small, less than 20 characters wide, text goes outside the window any way.)

Wrap pre on any page with Mozilla userContent.css

Edit $HOME/.mozilla/default/*.slt/chrome/userContent.css in your favourite editor. The file does not exist by default, you have to create it. Add

pre {
 white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
}

It is the same css as above with unrelated browsers removed and !important added. Important means that values in userContent are used instead those defined by stylesheets on websites. Close and open Mozilla. Try a page with pre but no css with its own. It should wrap, just like all pre-text in any website.

Links and bibliography

pmsyyz 2003-01-12 "I use this for IRC logs..." in Experts Exchange <pre> but not word wrap .

Akkana Peck: Customizing Mozilla .

Suignard (ed) / W3C: CSS3 Text Module - Candidate Recommendation 14 May 2003

Copyright, Notes, Todo

Todo: user stylesheet (!important) to make all pre in any page wrap in Mozilla. Test in Firefox.

Copyright 2004-09-12 Tero Karvinen www.iki.fi/karvinen . GNU Free Documentation License

Validate XHTML Basic 1.0

 

分享到:
评论

相关推荐

    Android View Animations

    For making animations more real, I created another project named Android Easing Functions which is an implementations of easing functions on Android. So, we need to dependent that project. Step 1 ...

    Radio Frequency Integrated Circuit Design

    &lt;br&gt;Frequency Analog Design 2&lt;br&gt;1.2.2 Units for Microwave and Low-Frequency Analog&lt;br&gt;Design 3&lt;br&gt;1.3 Radio Frequency Integrated Circuits Used in a&lt;br&gt;Communications Transceiver 4&lt;br&gt;1.4 Overview 6...

    Visual C++ 编程资源大全(英文源码 其它)

    1,01.zip&lt;br&gt;Output&lt;br&gt;显示所有的调试信息(5KB)&lt;END&gt;&lt;br&gt;2,02.zip&lt;br&gt;Some general debugging tips&lt;br&gt;一般的调试技巧(11KB)&lt;END&gt;&lt;br&gt;3,03.zip&lt;br&gt;Debugging ISAPI extension&lt;br&gt;调试ISAPI扩展(4KB)&lt;END&gt;&lt;br&gt;4,04....

    高二英语同步教案精品课件

    英语&lt;BR&gt; g2yykj1&lt;BR&gt; Making a difference&lt;BR&gt; 与同步教案配套使用&lt;BR&gt; &lt;BR&gt; &lt;BR&gt; 70&lt;BR&gt; &lt;BR&gt; &lt;BR&gt; g2yykj3&lt;BR&gt; Art and Architecture&lt;BR&gt; 与同步教案配套使用&lt;BR&gt; &lt;BR&gt; &lt;BR&gt; 71&lt;BR&gt; &lt;BR&gt; &lt;BR&gt; g2yykj5&lt;BR&gt; The ...

    VB编程资源大全(英文源码 其它)

    6 , chunks.zip&lt;br&gt;This will open a file and read it in "Chunks" of a selected file.&lt;END&gt;&lt;br&gt;7 , logging.zip&lt;br&gt;This is a bas that will log installation procedures so the file can be removed later.&lt;END...

    VB编程资源大全(英文源码 控件)

    on left and right side of a text box.&lt;END&gt;&lt;br&gt;40,Assist.zip&lt;br&gt;A simple application with source code which shows how to save the contents of a rich text box without the help of common dialog box.&lt;END&gt;...

    Visual C++ 编程资源大全(英文源码 DLL)

    1,01.zip&lt;br&gt;Dialogs in DLL&lt;br&gt;在DLL中实现对话框(5KB)&lt;END&gt;&lt;br&gt;2,02.zip&lt;br&gt;Export dialogs in MFC Extension DLLs&lt;br&gt;在MFC扩充DLL中输出对话框(12KB)&lt;END&gt;&lt;br&gt;3,03.zip&lt;br&gt;Remapping resource script ID's&lt;br&gt;...

    Windows Vista Bible

    DVD, Video, and More &lt;br&gt;Chapter : Making Movies with Movie Maker &lt;br&gt;Chapter : Fun with Media Center &lt;br&gt;Chapter : Troubleshooting Multimedia &lt;br&gt;&lt;br&gt;&lt;br&gt;Part VI: Managing Files and Folders &lt;br&gt;...

    高二上英语同步教案

    高二英语教学参考进度表&lt;BR&gt; &lt;P&gt; 序号 章节 内容 &lt;P&gt; 1 Unit 1 Making a difference &lt;BR&gt; 2 Unit 2 News media &lt;BR&gt; 3 Unit 3 Art and architecture &lt;BR&gt; 4 Unit 4 A garden of poems &lt;BR&gt; 5 Unit 5 The English ...

    Visual C++ 编程资源大全(英文源码 数据库)

    1,01.zip&lt;br&gt;Calling Stored Procedures&lt;br&gt;调用存储过程(8KB)&lt;END&gt;&lt;br&gt;2,02.zip&lt;br&gt;Create Access data source name dynamically&lt;br&gt;动态创建Access的数据源名(5KB)&lt;END&gt;&lt;br&gt;3,03.zip&lt;br&gt;Using DAO to read data ...

    VC++ 上位机组态程序(带温控器,电子秤,AD卡)

    ------------------------------&lt;br&gt;VC Upper computer monitor&lt;br&gt;Main functions: &lt;br&gt;&lt;br&gt;1. Initial parameters valid checking.&lt;br&gt;2. Display non-needle curve in real-time.&lt;br&gt;3. Report making.&lt;br&gt;4. ...

    webservice-ajax

    ...&lt;br&gt; &lt;/httpHandlers&gt;&lt;br&gt; ...&lt;br&gt; &lt;/system.web&gt;&lt;br&gt; ...&lt;br&gt;&lt;configuration&gt;&lt;br&gt;Making client-side JavaScript code&lt;br&gt;Let us take a look at the default.aspx file that was automatically created in our ...

    Beyond the C++ Standard Library An Introduction to Boost

    best-practice solutions for performing type conversions and lexical conversions&lt;br&gt;&lt;br&gt;Utility classes that make programming simpler and clearer&lt;br&gt;&lt;br&gt;Flexible container libraries that solve common ...

    PowerPoint to Flash

    Converting them into &lt;br&gt;Flash now, and your presentations can be played back every where, Windows, &lt;br&gt;Linux, Macintosh and even Hand held PCs, because Flash is the most popular &lt;br&gt;format in the ...

    Java™ Open Source Programming

    We aim to show you how to&lt;br&gt;bring these together to build a real-world application while avoiding complexity&lt;br&gt;and embracing simplicity. We will help you extend your knowledge of&lt;br&gt;Java and the ...

    Beyond Software Architecture: Creating and Sustaining Winning Solutions

    Upgrade &lt;br/&gt; Like Installation, Only Worse &lt;br/&gt; Making Upgrades Less Painful &lt;br/&gt; Market Maturity and Upgrades &lt;br/&gt; Chapter Summary &lt;br/&gt; Check This &lt;br/&gt; Try This &lt;br/&gt; &lt;br/&gt; Chapter 13....

    Beyond.the.C++ - Standard.Library.An.Introduction.to.Boost

    Introducing the Boost libraries: the next breakthrough in C++ programming&lt;br&gt;&lt;br&gt;Boost takes you far beyond the C++ Standard Library, making C++ programming more elegant, robust, and productive....

    Assembly.Language.Step-by-Step.Programming.with.DOS.and.Linux.Second.Edition.part3

    " &lt;br&gt; Chapter 1 - Another Pleasant Valley Saturday Understanding What Computers Really Do &lt;br&gt; Chapter 2 - Alien Bases Getting Your Arms around Binary and Hexadecimal &lt;br&gt; Chapter 3 - Lifting the ...

    Assembly.Language.Step-by-Step.Programming.with.DOS.and.Linux.Second.Edition.part2

    " &lt;br&gt; Chapter 1 - Another Pleasant Valley Saturday Understanding What Computers Really Do &lt;br&gt; Chapter 2 - Alien Bases Getting Your Arms around Binary and Hexadecimal &lt;br&gt; Chapter 3 - Lifting the ...

    Filthy Rich Clients: Developing Animated and Graphical Effects for Desktop Java Applications (Part 1)

    The book also discusses how to do so effectively, making sure to enrich applications in sensible ways.&lt;br&gt;&lt;br&gt;In-depth coverage includes&lt;br&gt;&lt;br&gt; * Graphics and GUI fundamentals: Dig deep into the ...

Global site tag (gtag.js) - Google Analytics