Summarize various line wrapping methods in html and css

In web development, you can use the br tag in HTML to wrap lines. If you are in an article, you can add
to the place where the article needs to wrap to achieve automatic line wrapping - often There is no gap between the small line break mentioned and before the line break; use the

tag to achieve a large line break. You can also use css attributes to implement automatic line wrapping and forced line wrapping. Use css to wrap consecutive English letters and numbers. If you encounter the article title list style and hope not to wrap, you can also use css style attributes to perform some control. This article is to talk about various line breaks in html and css.

You can first learn free courses related to php Chinese website

1. Study"HTML Development Manual"##
tags and

tags

in # Related tutorials

2. Study

"CSS 3.0 Reference Manual" Various line break properties

html, line breaks in css

1.

How to deal with css overflow and line breaks

Line breaks,

Note: Only valid for English

a. Long word wrap

word-wrap:

normal: Default, using the browser's default form, without destroying the word structure

break-word: break the structure of the word

b, text line break

word-break:

Value:

normal:

break-all: Destroy the word structure for line break

keep-all: Break line under the space in half-width state

2.

css control forced line break Solution

Under normal circumstances, elements have the default white-space:normal (automatic line wrapping, white-space:nowrap if not line wrapping). When the entered text exceeds the defined width, it will automatically wrap. But when the entered data is a bunch of characters or letters or numbers without spaces (regular data should not be there, but some testers will do it this way), when the width of the container is exceeded, the container will be expanded. Line break.

3.

Introduction to paragraph layout and line wrapping methods of HTML web pages

The appearance of a web page depends largely on its layout. When large paragraphs of text appear on the page, they are usually planned in paragraphs, and line breaks are also divided very strictly. This section starts with the detailed settings of paragraphs, so that readers can use tags to handle large paragraphs of text freely after learning.

4.

How to implement forced line breaks or non-line breaks in DIV, td, p and other containers in html

normal: According to text in Asian languages ​​and non-Asian languages Rules that allow line breaks within words

break-all : This behavior is the same as normal for Asian languages. Breaks within any word of a line of non-Asian language text are also allowed. This value is suitable for Asian text that contains some non-Asian text
keep-all : Same as normal for all non-Asian languages. For Chinese, Korean, and Japanese, word breaks are not allowed. Suitable for non-Asian text syntax that contains a small amount of Asian text: word-wrap : normal | break-word

5.

CSS3 Text line break

Text line break is actually a very common but An inconspicuous feature. You don’t need to set anything, the browser will automatically wrap the line. For example, in English, the browser will choose to wrap lines at half-width spaces or hyphens based on the container size. For example, in Chinese, the browser will choose to wrap the text or punctuation marks. But sometimes when encountering long words or URLs, the browser is not so smart, and the container will burst, which is ugly.

Related Questions and Answers

1.

How to wrap the text displayed when the mouse hovers over the title?

2.

How to wrap the string returned in the angular filter

2. css English paragraph line wrapping, word truncation

[Related recommendations]

1. PHP Chinese website free video tutorial: 《php.cn Dugu Jiujian (2) - CSS video tutorial"

2. PHP Chinese website free tutorial: "Learn HTML+CSS at your fingertips"

The above is the detailed content of Summarize various line wrapping methods in html and css. For more information, please follow other related articles on the PHP Chinese website!