Summary of forced line wrapping on a page

Source: Internet
Author: User
Tags string
Issues | page

If you want a table fixed size, the inside text is forced to wrap (especially in a long string of English text, and there is no space between the case), in order to make the long text does not break the purpose of the table, is generally the use of style: Table-layout:fixed. But under Firefox, there will be some problems, refer to some of Gmail's practices, do a few tests, come up with a solution.

If you want a table fixed size, the inside text is forced to wrap (especially in a long string of English text, and there is no space between the case), in order to make the long text does not break the purpose of the table, is generally the use of style: Table-layout:fixed. But under Firefox, there will be some problems, refer to some of Gmail's practices, do a few tests, come up with a solution.

Example 1: (ie browser) general situation

<table border=1 width=80>
<tr>
<TD>ABCDEFGHIGKLMNOPQRSTUVWXYZ 1234567890
</td>
</tr>
</table>
Effect:
You can see that the width=80 doesn't work and the form is propped up.

Example 2: (ie browser) use style table-layout:fixed

<style>
. tbl {table-layout:fixed}
</style>

<table class=tbl border=1 width=80>
<tr>
<TD>ABCDEFGHIGKLMNOPQRSTUVWXYZ 1234567890
</td>
</tr>
</table>
Effect:
The width=80 works, but the table wraps.

Example 3: (ie browser) using styles table-layout:fixed and nowrap

<style>
. tbl {table-layout:fixed}
</style>

<table class=tbl border=1 width=80>
<tr>
<TD nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
Effect:
The width=80 worked, and the line was killed.

Example 4: (ie browser) using a value fixed TD size with a style table-layout:fixed and nowrap

<style>
. tbl {table-layout:fixed}
</style>

<table class=tbl border=1 width=80>
<tr>
<TD width=20 nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<TD nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
Effect:
Unfortunately, the first TD's nowrap didn't work.

Example 5: (ie browser) using a percentage fixed TD size with a style table-layout:fixed and nowrap

<style>
. tbl {table-layout:fixed}
</style>

<table class=tbl border=1 width=80>
<tr>
<TD width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<TD nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
Effect:
Change it to a percentage, finally it's done.

Example 6: (Firefox browser) uses the style table-layout:fixed and nowrap effect when using a percentage fixed TD size :
Put example 5 under Firefox, and then Ft.

Example 7: (Firefox browser) uses the style table-layout:fixed and nowrap with a percentage fixed TD size, and uses div

<style>
. tbl {table-layout:fixed}
. td {Overflow:hidden;}
</style>

<table class=tbl border=1 width=80>
<tr>
<TD width=25% CLASS=TD nowrap>
<DIV>ABCDEFGHIGKLMNOPQRSTUVWXYZ 1234567890</div>
</td>
<TD CLASS=TD nowrap>
<DIV>ABCDEFGHIGKLMNOPQRSTUVWXYZ 1234567890</div>
</td>
</tr>
</table>
Effect:
The world is finally in peace.

Example 8: (Firefox browser) use style table-layout:fixed and nowrap with value fixed TD size, and use div

<style>
. tbl {table-layout:fixed}
. td {Overflow:hidden;}
</style>

<table class=tbl border=1 width=80>
<tr>
<TD width=20 CLASS=TD nowrap>
<DIV>ABCDEFGHIGKLMNOPQRSTUVWXYZ 1234567890</div>
</td>
<TD CLASS=TD nowrap>
<DIV>ABCDEFGHIGKLMNOPQRSTUVWXYZ 1234567890</div>
</td>
</tr>
</table>
Effect:
NoWrap's not working anymore.

In the end, example 7 is a solution that is perfect for both IE and Firefox to solve the problem of page-forced wrapping.



Related Article

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.