Hướng dẫn preserve formatting in html

Example

Preformatted text:

Nội dung chính

• Definition and Usage
• Browser Support
• Global Attributes
• Event Attributes
• More Examples
• Related Pages
• Default CSS Settings
• Things You Should Know
• About This Article
• Is this article up to date?
• How do you preserve formatting in HTML?
• How is text formatting done in HTML?
• How do you preserve space in HTML?
• How do you maintain paragraphs in HTML?

 Text in a pre element
 is displayed in a fixed-width
 font, and it preserves
 both      spaces and
 line breaks
 

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The

 tag defines preformatted text.
Text in a 
 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.
Also look at:
Tag
Description

Defines a piece of computer code

Defines sample output from a computer program

Defines keyboard input

Defines a variable
Browser Support
Element
Yes
Yes
Yes
Yes
Yes
Global Attributes
The 
 tag also supports the Global Attributes in HTML.
Event Attributes
The 
 tag also supports the Event Attributes in HTML.
More Examples
Example
How to create a pre-formatted text with a fixed width (with CSS):

This is a pre with a fixed width. It will
use as much space as specified.

Try it Yourself »
Related Pages
HTML Tutorial: HTML Text Formatting
HTML DOM reference: Pre Object
Default CSS Settings
Most browsers will display the 
 element with the following default values:
Example
 pre {
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em
0;
} 
Try it Yourself »
 Sometimes you don’t want to trust the browser to render spacing, tabs, and returns on its own. Poetry, formulas, or programming code, for example, may have their meaning changed or be harder to read if the browser is allowed to do its own thing. 
 But there’s an easy workaround you can use: the 
 element. The text between 
 and 
 is preserved in its original state and won’t reflow the text when the browser window is
resized. The code for this element looks like this: 
 
 This text breaks 
 like a poem would 



 yet is not, in fact, 
 a poem, as far 
 as I can tell. 
 
 However, you can’t retain everything from the original text. Browsers render preformatted text in a monospaced font, resembling Courier, and retain only simple formatting, such as bold and italics. 
 Get Specialized
 These special treatments of text are essential parts of any Web author’s knowledgebase. Keep them on hand when you need to create quotes, let others know when you have inserted text, or maintain the original formatting for a block of text. 
 Download Article 
 Download Article 
Sometimes copy/pasting the content of a document between programs
fails to preserve the formatting you worked so hard on. This occurs because the formatting styles of the software being used do not match. Web-based products tend to use HTML formatting, while older software often does not. This can often be fixed by updating the software in use, but there are options for those who do not wish to make that kind of change as well. 
 Things You Should Know
Use "Paste Special". Depending on your program, this may be
under File > Edit > Paste Special, Home > Paste menu > Paste special..., or Edit > Paste Special.
If HTML is supported by the programs you are copy/pasting from, enable HTML formatting on both and copy paste your complex formatting.
Save a word doc as an HTML file by going to File > Save As… and select Web Page (.htm or .html).
1
Cut or copy the desired text. This will move or copy the data to the clipboard. 
2
Locate Paste Special. Paste Special is a suite of options for formatting pasted text in your destination software. How to access these options will vary depending on the software in use. 
In Microsoft Office 2007 and
later this is located in Home > Paste menu (the arrow underneath the clipboard icon) > Paste Special… 
In newer versions a small clipboard icon may appear at the end of the text after pasting. Formatting can be selected here after the fact.
In OpenOffice this is located in File > Edit > Paste Special.
Google Docs has a similar option located in Edit > Paste Special, but only works for copy/paste within the browser.
Advertisement
3
Select a paste option. Depending on the software you are using, the options
will have different nomenclature. Different options will treat the pasted formatting differently. 
To retain all formatting from the text, press "Keep Source Formatting" or "HTML Format"
To retain only the text formatting, but not pictures, press "Keep Text Only".
If both documents have special formatting, like lists or tables that you want to combine, press "Merge Formatting."
Advertisement
1
Check that HTML formatting is supported by your software. Lack of format support is the most common issue for loss of formatting when copy/pasting between web and non-web software. 



Most modern email clients or office
software will enable HTML formatting by default, whether it’s a web client, like Gmail/Google Docs, or a separate piece of software, like Microsoft Word/Outlook.
Software that is either very old or very simple, like WordPad, Notepad, or TextEdit will not support HTML format.
2
Enable HTML formatting. It is possible that HTML formatting is supported but has been disabled. You can usually toggle this manually in the options. Enabling this option will vary depending on the client being used. Typically you
will want to look for an option labeled "HTML Format" or "Rich Text" in the options section of the client or in the text composition window. 
For example, formatting options can be toggled in Outlook in Tools > Options > Mail Format.
3
Copy/Paste complex formatting. Once both programs you are copying from and pasting to are using HTML formatting, you can copy/paste formatted text as smoothly as any other text. 
Advertisement
1
Compose your document with a word processor. If you do not want to change your word processor and you cannot toggle HTML formatting, then you can still format normally and convert it to an HTML format. 
2
Save the file as a web page. This will convert the formatting to HTML and allow you to copy that formatting when you open it. 
Go to File > Save As… and select Web Page (.htm or .html) from the "Save As Type" menu. This path may vary
depending on the word processor you are using.
3
Open the file with your web browser. The web browser will open a web page with the formatted text. If the file does not open with the browser by default there are two other
options: 
Drag and drop the .html file onto your browser icon.
Right-click the .html file and select "Open With…" and select your web browser from the list.
4 
Copy/paste the text from the browser page to
your email. Since the webpage will be HTML formatted, there should be no problem pasting it into your email client with the formatting intact. 
Advertisement
Add New Question
Question
I am copying stuff from a Word document to an online application form, and it does not preserve the cubic functions and power that are inserted to the numbers. What do I do?



 It sounds like the online form doesn't support the formatting language used by Microsoft Word to make these symbols. Try another notation such as X^3. 
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
Advertisement
 Video
Update your web browsing software. Webmail clients tend to suffer when using very old versions of web browsers. It’s easy, free, and more secure!
 Thanks for submitting a tip for review! 
Advertisement
About This Article
Thanks to all authors for creating a page that has been read 231,037 times.
Is this article up to date?
How do you preserve formatting in HTML?
The 
 tag defines preformatted text. Text in a 
 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.
How is text formatting done in HTML?
HTML Formatting Elements.
 - Bold
text..
 - Important text..
 - Italic text..
 - Emphasized text..
 - Marked text..
 - Smaller text..
 - Deleted text..
 - Inserted text..
How do you preserve space in HTML?
The HTML 
 tag defines preformatted text preserving both whitespace and line breaks in the HTML document. This tag is also
commonly referred to as the 
 element.
How do you maintain paragraphs in HTML?
The HTML 
 element defines a paragraph. A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.