CSS control text Wrap line

1. You will die the width of the table, which gives the table a width value (is the value, not the percentage)

2. Force No Line break

div{

White-space: Do not wrap, normal default; nowrap forces all text to be displayed in the same line until the text ends or the BR object is encountered

White-space:nowrap; }

Wrap Line

div{

Word-wrap:break-word;

Word-break set forced line wrapping; text rules for normal Asian and non-Asian languages, allowing word wrapping within words

Word-break:normal;

}

Force English words to break

div{

Word-break:break-all;

}

3. Summing up, as long as the following sentence is defined in the CSS, can protect the Web page will not be open again.

table{table-layout:fixed;}

TD (Word-break:break-all; word-wrap:break-word;)

Comment:

1. The first table{table-layout:fixed;}, this style allows the table to have!!! Characters such as exclamation marks.

2.td{word-break:break-all}, generally with this sentence this OK, but in some special cases will still open, so need to add the next sentence (Word-wrap:break-word;) can be solved. This style allows some consecutive words in the table to be wrapped in English.

http://www.knowsky.com/

(1) Syntax:

Word-break:normal | Break-all | Keep-all

Parameters:

Normal: Allow line wrapping in words according to Asian and non-Asian language text rules

Break-all: The behavior is the same as in Asian languages. Also allows non-Asian-language text lines to be broken within any word. This value is appropriate for Asian text that contains some non-Asian text

Keep-all: Same as normal for all non-Asian languages. For Chinese, Korean, Japanese, word break is not allowed. Suitable for non-Asian texts containing small amounts of Asian text

(2) Syntax:

Word-wrap:normal | Break-word

Parameters:

Normal: Allow content to open the specified container boundary

Break-word: Content will be wrapped within the boundary. Word Wrapping (Word-break) also occurs if needed

Description

Sets or retrieves whether a career change is broken when the current row exceeds the bounds of the specified container.

The corresponding script attribute is word-wrap. Please refer to the other bibliography I have written.

(3) Syntax:

Table-layout:auto | Fixed

Parameters:

Auto: The default automatic algorithm. The layout will be based on the contents of each cell. The table is displayed after each cell has been read by the calculation. The speed is very slow

Fixed: The algorithm for fixing the layout. In this algorithm, the horizontal layout is based solely on the width of the table, the width of the table border, the cell spacing, the width of the column, regardless of the table contents.

Description

How do I make a table wrap?

Sets or retrieves the layout algorithm for a table.

The corresponding script attribute is tablelayout.

4. According to most articles on the Internet, just add it in CSS:

Code

..........

Code:

Table {<br/>

Table-layout:fixed;word-break:break-all;word-wrap:break-word;} <br/>

Div{word-break:break-all;word-wrap:break-word;}

Can solve the table and the layer is bursting, and I did it at first. However, this code will cause a problem, you will find that the English words are truncated, which is not in line with the English writing habits are not conducive to reading.

Later I found that the above code rewrite can be done both to prevent the table/layer burst and prevent the word break.

As follows:

Code

Code:

Table {

table-layout:fixed;

Word-wrap:break-word;

}

div {

Word-wrap:break-word;

}

This is also the code I use now.

CSS control text Wrap line