• notice
  • Congratulations on the launch of the Sought Tech site

CSS of automatic line wrapping

The problem of automatic line wrapping, the wrapping of normal characters is more reasonable, and continuous numbers and English characters often enlarge the container, which is a headache.The following is how CSS implements line wrapping.


 


For div, p and other block-level elements, the

normal text wrapping (Asian text and non-Asian text) elements have the default white-space: normal, and they will automatically wrap after the defined width.

html

<div id="wrap"> Normal text wrapping (Asian text and non-Asian text) The element has a default white-space: normal, when defined</div>

css

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


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


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

or

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


<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>


Effect: line wrapping can be achieved


2.(Firefox browser) continuous line breaks of English characters and Arabic numerals, all versions of Firefox did not solve this problem, we only have to hide the characters beyond the boundary or add a scroll bar to the container


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


<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>


Effect: the container is normal, the content is hidden


For table


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


<table style="table-layout:fixed" width="200">

<tr>

<td>abcdefghigklmnopqrstuvwxyz1234567890sssssssssssss

</td>

</tr>

</table>


Effect: hide extra content


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


<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: can wrap


3.(IE browser) Nesting div, p, etc.in td, th, etc.uses the above-mentioned div, p line break method


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


<table style="table-layout:fixed" width="200">

<tr>

<td width="25%" style="word-break: break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>

<td width="75%" style="word-wrap: break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>

</tr>

</table>


Effect: more hidden than content


5.(Firefox browser) Nest div, p, etc.in td, th, and

run the code box using the above-mentioned method against Firefox.

Finally, the probability of this phenomenon is very small, but the spoof of netizens cannot be ruled out.If you have any questions, please go to my guestbook to ask


Below is the effect of the mentioned example


 http://www.blueidea.com/tech/web/2006/3469.asp


Tags

Technical otaku

Sought technology together

Related Topic

0 Comments

Leave a Reply

+