Css, English letters, numbers, and new lines

When a block element that defines the width is filled with only English letters or numbers, both IE and FF support large containers and will not automatically wrap.

In addition, when a number or an English character carries a Chinese character, it will wrap the line from the Chinese character, but the pure Chinese character can wrap the line automatically. How can this problem be solved? Let's take a look at the two protagonists word-wrap and word-break.

Word-break is used to control word breaking

Three values:

(1) normal
(2) break-all (disconnect a word. When a word reaches the boundary, the next letter automatically goes to the next line. It mainly solves the problem of long strings in English .)
(3) keep-all

Word-wrap is used to control line breaks

Two values:

(1) normal
(2) break-word (this value is used to force line feed. The content will be wrapped in the boundary. There is no problem with Chinese, and there is no problem with English statements. But it does not work for long strings in English .)
 

Solution

You can add it to CSS.

The code is as follows:	Copy code
Word-wrap: break-word; Word-break: break-all;

. (Firefox) consecutive English characters and Arabic numerals are disconnected. All Firefox versions do not solve this problem. We only need to hide the characters that exceed the boundary or add a scroll bar to the container.

The code is as follows:	Copy code
# Wrap {word-break: break-all; width: 200px; overflow: auto ;} <Div id = "wrap"> abcdefghijklmnabcdefghijklmnabcdefghijklmn1111111 </div>

Effect: The container is normal and the content is hidden.

For table

1. (ie browser) use table-layout: fixed; to force the width of the table and hide unnecessary content.

The code is as follows:	Copy code
<Table style = "table-layout: fixed" width = "200"> <Tr> <td> abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss </td> </tr> </table>

 

Effect: hide unnecessary content

2. (ie browser) use table-layout: fixed; to force the width of the table, use word-break: break-all in the td and th layers, or use word-wrap: break-word to wrap the line.

The code is as follows:	Copy code
<Table width = "200" style = "table-layout: fixed;"> <Tr> <td width = "25%" style = "word-break: break-all;"> abcdefghigklmnopqrstuvwxyz 1234567890 </td> <td style = "word-wrap: break-word; "> abcdefghigklmnopqrstuvwxyz 1234567890 </td> </tr> </table>

 
Effect: line breaks are supported.

Example

The code is as follows:

Copy code

<Title> SS </title> <Link href = "style_tu.css" rel = "stylesheet" type = "text/css" media = "screen"/> <Style type = "text/css"> <! -- Body, td, th { Font-family: Arial, Helvetica, sans-serif; Font-size: 12px; Color: #444444; Word-wrap: break-word; Word-break: break-all; } --> </Style> English alignment: <br> <Div style = "font-size: 12px; width: 300; text-align: justify; text-justify: inter-ideograph"> & uml; Crepower & uml; Brand Belts, chains and other Transmission Parts are manufactured under ISO9001 certified quality-control system. with improved quality material and well-organized production procedures, & uml; Crepower & uml; power transmission products have noticeably fatigue strength and long-service life. we can supply all types and sizes according to the related standards and MERS 'requirements and </div> <Br>