I'm creating comment fields which are based on user input into textarea. But when I use <pre> tags I can't tell it to wrap properly inside the comments view.
I'm not stuck on using <pre> tags if there is a better way of doing it. Only reason I chose to use it was to keep linebreaks and whitespaces added by user.
I noticed there is a property called "width" for <pre>, but W3 notes it as deprecated, and it only breaks after so and so many characters, which isn't ideal either. (It also doesn't work with IE at all.)
Any suggestions?
The usual approach is to convert single newlines in the input to “<br />”. (Double-newlines would normally introduce a new “<p>” element.)
While the font-size cannot be changed for text directly inside pre tags, you can always wrap that text in another element (a span, for example) and change the font size of that element.
HTML <pre> tag defines preformatted text. It is used to display code blocks since it preserves spaces and line breaks. If the line is large, then the <pre> tag won't wrap it by default. To wrap it, we need to use CSS.
The <pre> tag defines preformatted text. Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.
The usual approach is to convert single newlines in the input to “<br />”. (Double-newlines would normally introduce a new “<p>” element.) This doesn't cover multiple-whitespace-runs though; if you need to preserve those, you could replace each two-space sequence with a space and a non-breaking space (' ', ' \xA0', or '  ' as a character reference).
There is a CSS way you can retain literal newlines and whitespaces but still wrap when the line length is too short:
white-space: pre-wrap;
However this CSS 2.1 and CSS 3 property value is not supported cross-browser under its original name. Webkit (Safari, Chrome) picks it up; to get it to work under the other popular browsers, you have to add:
white-space: -moz-pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;
The ‘word-wrap’ is for IE, which as always has its own way of doing things.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With