<pre> troubles

possible to wrap text and preserve line breaks?

[redtail]

Having trouble wrapping my head around this one and I get the feeling I'm missing something obvious.

I have a text file containing an essay. Each paragraph is a word wrapped line in the text file and there are blank lines between them. I'd like to display this file in a web page using only HTML and CSS without losing those blank lines but editing the file to add <p> and </p> marks everywhere isn't an option.

It sounds like the <pre> tag is perfect for the job. But when I use <pre> the text runs through my "margin-right" CSS setting and past the right edge of the window. None of the CSS tweaks I've tried have worked.

Any ideas?

[tedster]

Welcome to WebmasterWorld, redtail.

It sounds like there are no actual line break characters in your file - the software you're using to view it is wrapping the visible text when it renders the file on screen, but it doesn't actually add line break characters.

So you'll need to format the text of the essay somehow. To use <pre> tags you'll need to place line breaks by hand. It might be easier to put in those <p></p> tags and use css to create the "double spaced" look with a rule like line-height:2em;

[Longhaired Genius]

Putting the paragraph tags into a text file is a trivial task if you have a text-editor that will search and replace with regular expressions.

I use HTML-Kit.

I search for the regular expression: \n\n (two new lines)

and replace with the regex: </p>\n\n<p>

Then I put the first <p> tag and the last </p> tag in by hand.

This is well worth doing if you have never used regular expressions before. It's just about the simplest regex task you can get, and boy! will you feel pleased with yourself.

[redtail]

I have started using reg expressions and they work well, yes. I was merely wondering if there was some workaround with HTML and CSS and it doesn't look like there is.

Thanks for your help.

[brujo]

I have had similar problems.
Here is a sample that solves this problem:

<p STYLE="white-space: -pre-wrap">text here</p>

or

<p STYLE="white-space: -moz-pre-wrap">text here</p>

BUT these styles are supported by Opera and Netscape only :(

take a look to this link for more details:

[blooberry.com...]