Shulou(Shulou.com)06/01 Report--

This article mainly talks about "CSS space and line wrap example analysis". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor to take you to learn "CSS spaces and line feeds example analysis"!

The white-space attribute affects how the user agent handles spaces, line breaks, and tab characters in the source document.

By using this property, the outline affects how browsers handle white space between words and lines of text. At some level, the acquiescence of XHTML processing has implemented white space handling: it separates all white space characters into a single space. Therefore, given the following tag, when displayed in a Web browser, only one space appears between the words, while line breaks in the element are ignored:

This paragraph has many spaces in it.

Perhaps this tacit behavior is significantly configured with the following voice:

P {white-space: normal;}

The above designated secret browser follows the usual practice of punishing: throwing away extra spaces. If this value is given, the newline character (carriage return) is converted to a space, and the sequence of multiple spaces in a line is converted to a single space.

Example TIY: white-space: normal

Value pre

However, assuming that white-space is configured as pre, the disposal penalty for white space characters varies among the elements affected by this attribute, behaving like the pre element of XHTML; the vacancy character will not be ignored.

Assuming that the value of the white-space property is pre, the reader will pay attention to the rated spaces, or even enter. In this respect, not to mention in this respect alone, any element can be equivalent to a pre element.

Example TIY: white-space: pre

Note: after testing, IE 7 and earlier browsers do not approve of this value, so please use a non-IE browser to view the above example.

Value nowrap

The opposite value is nowrap, which resists text wrapping in an element unless a br element is used. The use of nowrap in CSS is similar to the use of HTML 4 to configure a table cell so that it cannot wrap, but the white-space value may apply any element.

Example TIY: white-space: nowrap

Values pre-wrap and pre-line

CSS2.1 introduces the values pre-wrap and pre-line, which are not available in previous versions of CSS. The influence of these values is to allow creative staff to better control the disposal of blank characters.

If the white-space setting of an element is set to pre-wrap, the text in the element will retain a sequence of white space characters, but the text lines will wrap normally. If set to this value, the line delimiters in the source text and the natural line delimiters are also saved. Pre-line, in contrast to pre-wrap, separates the vacancy sequence as in malformed text, but makes a living newline.

Example TIY: white-space: pre-wrap

Example TIY: white-space: pre-line

Preference: we tested the following two examples in IE7 and FireFox2.0 readers, but in the end, neither pre-wrap nor pre-line lost good approval.

At this point, I believe you have a deeper understanding of "CSS space and newline instance analysis". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.