Home >Web Front-end >HTML Tutorial >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
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
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 12:14:381414browse
Suppose the code is as follows:
<html><body>文本内容</body></html>
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>
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
c51f4459fcf422a08b11ee79272896f5 Normal text wrapping (Asian and non-Asian text) elements have the default white-space:normal, when defined 16b28748ea4df4d9c2150843fecfba68
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;}
c51f4459fcf422a08b11ee79272896f5abcdefghijklmnabcdefghijklmnabcdefghijklmn11111111116b28748ea4df4d9c2150843fecfba68
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;}
c51f4459fcf422a08b11ee79272896f5abcdefghijklmnabcdefghijklmnabcdefghijklmn11111111116b28748ea4df4d9c2150843fecfba68
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
2b94abb815df9b9ee3c7b29b44ef15cb 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
4f8a34af9dbf6a34d21d1abb867de88e
a34de1251f0d9fe1e645927f19a896e8
6a046b714887cbeb561b7bcb42021db1abcdefghigklmnopqrstuvwxyz 1234567890
b90dd5946f0946207856a8a37f441edf
08489936b757b69dc57e83ac27d9982fabcdefghigklmnopqrstuvwxyz 1234567890
751fc82c77b130cac1e558e7bf7121da
< ;/tr>
f16b1740fad44fb09bfe928bcc527e08
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
2b94abb815df9b9ee3c7b29b44ef15cb
a34de1251f0d9fe1e645927f19a896e8
7331dd6f30baae9f93dd1ca1b6b4c0aaabcdefghigklmnopqrstuvwxyz1234567890b90dd5946f0946207856a8a37f441edf
81fb33e6e51eb03d35c100c37b8eba32abcdefghigklmnopqrstuvwxyz1234567890b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08
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