Css:css Control text Wrapping

Source: Internet
Author: User
Tags word wrap

1. You set the width of the table, that is to give the table a width value (is the value, not a percentage)
2. Force No Line wrapping

div{
White-space: do not wrap; normal defaults; nowrap forces all text to appear in the same line until the text ends or encounters a BR object
White-space:nowrap; }


Wrap Line

div{
Word-wrap:break-word;

The

//word-break settings are forced to wrap; normal Asian and non-Asian text rules allow wrapping within words
Word-break:normal;
}


Enforce break in English words

div{
Word-break:break-all;
}

3. Summed up, as long as the definition of CSS in the following sentences, can protect the Web page will not be stretched.

Table{table-layout:fixed;
TD (Word-break:break-all; word-wrap:break-word;)

Comment:

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

2.td{word-break:break-all}, generally this is OK, but in some special circumstances will still open, so need to add the following sentence (Word-wrap:break-word;) can be solved. This style lets you wrap some consecutive English words in a table.
http://www.knowsky.com/
(1) Syntax:

Word-break:normal | break-all | keep-all

Parameter:

Normal: According to Asia Text rules for languages and non-Asian languages that allow wrapping within words
Break-all: This behavior is the same as the normal for Asian languages. Also allows any word in a non-Asian text line to be disconnected. This value is appropriate for Asian text
Keep-all that contains some non-Asian text: the same as for all non-Asian languages. For Chinese, Korean, Japanese, word is not allowed to break. For non-Asian text that contains small amounts of Asian text

(2) Syntax:

Word-wrap:normal | Break-word

Parameter:

Normal: Allow content to top open specified container bounds
break- Word: The content wraps within the boundary. If necessary, the word wrap (Word-break) also occurs

.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 other bibliographies 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 not displayed until each cell is read and calculated. The speed is 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's borders, the spacing of the cells, the width of the columns, and the table contents regardless of the

Description:
How to make a table wrap automatically?
Sets or retrieves the layout algorithm for the table. The
Corresponding script attribute is tablelayout.


4. According to most articles on the Web, just add 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;} The
can solve the table and the layer is bursting, and I did it at first. However, this code will create a problem, you will find that the English words are all truncated, which does not conform to the English writing habits and is not conducive to reading.

Later I found that the code could be rewritten to prevent the form/layer from bursting and the word from breaking.
as follows:
Code

Codes:
Table {
table-layout:fixed;
Word-wrap:break-word;
}
Div {
Word-wrap:break-word;
}

This is the code I'm using now.

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.