Implementation of forced line breaks and no line breaks in containers such as div, td and p in html tags

Forced line breaks or non-line breaks in p, td, p and other containers are quite practical in some cases. The following article has compiled some relevant knowledge and has specific implementation methods. Friends who need it can refer to it. 1. Force no line breaks and end with an ellipsis.

<p style="width:100px;overflow:hidden;
white-space
:nowrap;
text-overflow
:ellipsis;" > 
你好朋友朋友朋友我为什么不能看到效果啊 
</p>

2. css automatic line break

p{ 
word-wrap
: break-word; 
word-break
: normal; }

3. css forces English word line break

p{word-break:break-all;}

If p Nesting, to make the inner p automatically wrap according to the content, you can only set the width of the outer p and white-spance:nowrap.

word-break:break-all and word-wrap:break-word both enable the content of its container such as p to automatically wrap.

The difference between them is:

1, word-break:break-all For example, if p is 200px wide, its content will automatically wrap to 200px. If there is a long English word at the end of the line (congratulation, etc.), it will truncate the word and turn it into the line. The end is conra (the front-end part of congratulation), and the next line is the back-end part of tulation (conguatulation).

2, word-wrap:break-word example is the same as above, but the difference is that it will congratulate the entire word as a whole. If the end of the line is not wide enough to display the entire word, it will automatically congratulate the entire word. Put it on the next line without truncating the word.

3, word-break;break-all Supported version: IE5 or above This behavior is the same as normal in 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.

WORD-WRAP:break-word Supported version: IE5.5 or above The content will be wrapped within the boundary.

If necessary, word-break will also occur. The table automatically wraps to avoid stretching.

word-break : normal | break-all | keep-all

Parameters:

normal: In accordance with the text rules of Asian and non-Asian languages, line breaks are allowed within words

break-all: The 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. Syntax suitable for non-Asian text that contains a small amount of Asian text:

word-wrap : normal | break-word

Parameters:

normal : Allow content to push beyond the specified container boundaries

break-word : Content will break within boundaries. If necessary, word-break also occurs. Description: Sets or retrieves whether to break the line when the current line exceeds the boundary of the specified container. The corresponding script feature of

is wordWrap. Please see other books I have written. Syntax: table-layout : auto | fixed Parameters: auto : Default automatic algorithm. The layout will be based on the contents of each cell. The table will not be displayed until each cell is read and calculated. Very slow fixed: Fixed layout algorithm. In this algorithm, the horizontal layout is based only on the width of the table, the width of the table border, the cell spacing, and the width of the columns, and has nothing to do with the content of the table. Description: Set or retrieve the layout algorithm of the table. The corresponding script attribute is tableLayout.

Suggestion: 3C detection of word-break will show problems, which will also cause problems in Baidu snapshots - this attribute OPERA FIREFOX browser does not support the word-break attribute and can be replaced by white-space:normal; , so that the line breaks can be correct under FireFox and IE, and it should be noted that the spaces between words cannot be used to replace them, otherwise the line breaks will not be correct.

The above is the detailed content of Implementation of forced line breaks and no line breaks in containers such as div, td and p in html tags. For more information, please follow other related articles on the PHP Chinese website!