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

This article mainly introduces the text in the html page how to set automatic line wrapping, the article is very detailed, has a certain reference value, interested friends must read it!

In the web page, it will be used to display a paragraph of text, but do not know in advance, the length and content of the text, at this time, we mostly use to fill div or pre to display the text.

When using the div element, determine the width plus the following two attributes to ensure that the text filled in the div automatically wraps the line.

The word-wrap:break-word;//word-wrap attribute allows long words or URL addresses to wrap to the next line. / / break-word wraps lines inside long words or URL addresses. The word-break:break-all;//word-break attribute specifies the handling of automatic line wrapping.

When using the pre element, similarly, the following two attributes are added to automatically wrap the text in it.

White-space:pre-wrap;//pre-wrap preserves the sequence of white space characters, but wraps lines normally. Word-break:break-all

Word-wrap:break-word

Div we are all familiar with, can fill text or other elements, but the text in div, often can not maintain the original format, such as spaces, enter, and so on.

The pre element defines preformatted text. Text enclosed in pre elements usually leaves spaces and newline characters. The text will also be rendered as an equal-width font.

A common use of pre tags is to represent the source code of a computer.

Tags that can cause paragraphs to break (such as headings, p, and address tags) must never be included in blocks defined by pre. Although some browsers interpret the paragraph end tag as a simple line wrap, this behavior is not the same in all browsers.

The text allowed in the pre element can include physical and content-based style changes, as well as links, images, and horizontal separators. When you put other tags, such as the a tag, in the pre block, you can just put them in the rest of the HTML/XHTML document.

The above is all the contents of the article "how to set automatic line wrapping in html web pages". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.