Jump to content

How Do You Text Wrap Preformatted Text?


Recommended Posts

Here is my situation! Nearly all of my files on my computer are in .html format. I do have a large collection of books that are in .txt format. I want to read those books using the web browser instead of a text editor. I do not like the way web browsers display my .txt files (mainly the font). I converted the text files into html format using my external CSS, and formatting the body of the text using one <pre> tag. If I were to format the body of the text with header and paragraph tags, it would take far too long even using search and replace expressions in a text editor. Also it would drastically increase the size of my book files as I have a rather large collection on my hard drive. So formatting each text book with the <pre> is the only logical solution I can think of. The only problem is that I can't figure out how to line wrap the text. Every browser that I have used (Mozilla and Firefox) do not text wrap preformatted text. It is not acceptable to read a book using the horizontal scroll bar for each line. After two hours of searching the web, I have not found a solution using CSS.My temporary solution has been to use the depreciated width attribute to set the number of characters displayed on each line (<pre width="55">). As all my web pages are in strict format, I don't like doing this. Also I have to change the number of characters displayed if I change the zoom factor on the browser. This is not a good solution.Another solution I have is to tell my browser to open text files using my text editor. All text editors I have seen have the ability to wrap text. I would much rather use the browser because I share my files with some friends and family that are computer illiterate friends and family. I only want them to use a web browser. Configuring text editor preferences is not something they can handle. I also checked to see if there were settings with Mozilla and Firefox that would wrap text. Unless there is some configuration file, I have not been able to find such a setting. Text editors have this option but they only deal in text. As a web browser would have to wrap images, and tables, I don't think they could even provide a wrapping setting.Thanking all who reply!

Link to post
Share on other sites

found at: http://forums.techguy.org/web-design-devel...lines-wrap.html<style>pre{white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */white-space: -pre-wrap; /* Opera 4 - 6 */white-space: -o-pre-wrap; /* Opera 7 */white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */word-wrap: break-word; /* IE 5.5+ */}</style>

Link to post
Share on other sites

Thank-you both! I have added both recommendations to my master css file.Ingolme's recommendation is nice as it wraps text without even using the pre tag. Multiple spaces and line breaks are not preserved however.Aalbetski's recommendation wraps text using the pre tag with every browser I have on my computer.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...