How to set a piece of text so that its width is 62% of the page width and it can wrap automatically? _html/css

How to set a piece of text so that its width is 62% of the page width and it can wrap automatically? _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:14:38

Original

1405 people have browsed it

Suppose the code is as follows:

<html><body>文本内容</body></html>

Copy after login

This text content is very long. I hope that the width of the entire web page is the width of the screen. The width of this text content is 62% of the screen width and it can automatically wrap. What should I do? deal with?

Reply to discussion (solution)

<body><div style="margin:0 19%; line-height:1.5;">档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档</div></body>

Copy after login

Supplement: Pure numbers or consecutive English letters are not acceptable. Another way of writing is needed. Text and English words can be wrapped.

Automatic line wrapping problem. Line wrapping of normal characters is more reasonable, but continuous numbers and English characters often expand the container, which is quite a headache. Here is how CSS implements line wrapping

For block-level elements such as div and p
normal text line wrapping (Asian text and non-Asian text) elements have the default white-space:normal, which will automatically wrap after the defined width
html

Normal text wrapping (Asian and non-Asian text) elements have the default white-space:normal, when defined

css
#wrap{white -space:normal; width:200px; }

1. (IE browser) For continuous English characters and Arabic numerals, use word-wrap: break-word; or word-break:break-all; to achieve Force line break

#wrap{word-break:break-all; width:200px;}
or
#wrap{word-wrap:break-word; width:200px;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

Effect: Line breaks can be achieved

2. (Firefox browser) Continuous English characters and Arabic numerals Line breaks, all versions of Firefox do not solve this problem. We can only hide the characters beyond the boundary or add scroll bars to the container

#wrap{word-break:break-all; width:200px; overflow: auto;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

Effect: container is normal, content is hidden

for table

1. (IE browser) Use table-layout:fixed; to force the width of the table and hide excess content

Effect: Hide redundant content

2. (IE browser) use table-layout: fixed; to force the width of the table, the inner td, th uses word-break: break-all; or word-wrap: break-word; line break

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

< ;/tr>

Effect: can wrap

3. (IE browser) Use the above mentioned method to nest div, p, etc. in td, th The line wrapping method of div and p

4. (Firefox browser) Use table-layout: fixed; to force the width of the table, and the inner td, th uses word-break: break-all; or word-wrap : break-word ;Line break, use overflow:hidden; to hide the excess content, overflow:auto; will not work here

abcdefghigklmnopqrstuvwxyz1234567890

Effect: Hide more than the content

5. (Firefox browser) Nest div, p, etc. in td, th and use the method mentioned above to deal with Firefox