HTML provides the tag PRE (which needs both opening and ending tags) to indicate that the wrapped text will maintain all the included character spaces and the line breaks. When not used, HTML will ignore all such spaces and texts will be presented in a continuous line. This article will present the way in which to apply this in Cascading Style Sheets (CSS).
The PRE tag in HTML is used to indicate a text content that will keep the structure so that all indent spaces, hard line breaks and line ends will be presented exactly as they are typed in the HTML text file. This tag requires both the open and close tags which limit the effect of the tag. In a sense, this is an enhanced version of the Blockquote tag which only applies some indent and (if desired) a different style to the text. However, it removes all surplus spaces as HTML does.
Use in CSS
In a CSS file (or in a CSS declaration in the header of the HTML file), the PRE wrap can be included as a standard style family to be applied as one specific paragraph style. In this case, the specific behaviour of the desired PRE tag has to be indicated by using the available tag attributes in the body section of the HTML text file (for more information and attributes, please check W3schools.com). The main attributes are: - dir - This indicates the direction of text: Right-to-left ("rtl") or left-to-right ("ltr") - id - This is a unique identification so that several different PRE tags can be defined - lang - This is a language code that indicates the specific language of the wrapped text - style - Thi is a specific style option. It is not to be used if the PRE tag will be implemented in the CSS section. The font style itself will be given in the CSS section included in the header. It can include any possible style tag that modifies the appearance of the text (CSS decoration).
Basic CSS definitions are included in the HEAD section for H1, P and PRE tags.
- When read as a standard paragraph, all spaces are removed.
- When read as pre-formatted text, spacing is maintained exactly as it is in the text file.
- When read as pre-formatted of the special type "my_pre", the decoration that is defined in the CSS section will apply.
Examples of use of the PRE tag You may present dialogs with a PRE style for each person. You may also use PRE to format dates.