CSS word-wrap prevents open tables

Last Update:2017-01-13 Source: Internet

Author: User

Tags truncated

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

I. About the noWrap attribute of TD
☆Ask the question:
<Td width = "28%" align = "right" nowrap>
I set nowrap and do not set nowrap to the same effect. That is, the table automatically stretches with the text. Why?

& Rarr; answer:
The behavior of the noWrap attribute of the TD element is related to the width attribute of the TD element.

◆ If the TD width is not set, the noWrap attribute works.
◆ If the TD width is set, the noWrap attribute does not work.

Sample file, click the run button to view the effect

HTML code
Reference:
--------------------------------------------------------------------

The code is as follows:

Copy code

<Html>
<Head>
<Title> research on wrap attributes </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
</Head>

<Body bgcolor = "# FFFFFF" text = "#000000">
<P> test string: </p>
<P> I finally understand that I have a tough life, which is far more powerful and wearable than I imagined ...... </P>
<P> empty table with no nowrap attribute set for cells: </p>
<Table width = "100" border = "1" cellspacing = "0" cellpadding = "0">
<Tr>
<Td >;</td>
</Tr>
</Table>
<P> add a test string: </p>
<Table width = "100" border = "1" cellspacing = "0" cellpadding = "0">
<Tr>
<Td> I finally understand that I have a tough life, which is far more powerful and wearable than I imagined ...... </Td>
</Tr>
</Table>
<P> The nowrap attribute is set for the cell, and the width attribute is not set: </p>
<Table width = "100" border = "1" cellspacing = "0" cellpadding = "0">
<Tr>
<Td nowrap> I finally understand that I have a tough life, which is far more powerful and wearable than I imagined ...... </Td>
</Tr>
</Table>
<P> The cell has set the nowrap attribute and the width attribute: </p>
<Table width = "200" border = "1" cellspacing = "0" cellpadding = "0">
<Tr>
<Td width = "120" nowrap> I finally understand that I have a tough life that is far more powerful and wearable than I imagined ...... </Td>
<Td >;</td>
</Tr>
</Table>
</Body>
</Html>

----------------------------------------------------------------------
----------------------------------------------------------------------
II. Table width and line feed in cells
1. To fix the total table width and the width of each column:
<TABLE id = "Table1" style = "TABLE-LAYOUT: fixed" border = "1">
Or in the script:
This. style. tableLayout = fixed
2. Line feed problems
<Td> there is an attribute called NOWRAP, which can be used to control whether line breaks are allowed for each cell.
<TD nowrap = true>
Or
This. noWrap = true
3. Forcibly return English words

The preceding two methods can fix the table width and set whether each unit can return rows. Now, another problem may occur, when a long English word is allowed to return to the row, it may exceed the width of the cell. If the word is not truncated from it, the part of the word that exceeds the cell width is not displayed. Therefore, the word must be forcibly truncated back to the row where the length of the cell is exceeded.

We can use the word-break style in css to achieve our goal:
<TABLE id = "Table1" style = "TABLE-LAYOUT: fixed; word-break: break-all" border = "1">
Or in the script:
This. style. wordBreak = break-all

Set or obtain the following value for String:
Normal
Default value. You can return rows from each word.
Break-all
The row is returned when the column width is exceeded, regardless of the position.
Keep-all
Return of Chinese, Japanese, and Korean is not allowed. This function is similar to the non-Asian version of "normal.

To sum up, use noWrap to force the text not to wrap, and then use style = "TABLE-LAYOUT: fixed; WORD-BREAK: break-all; border-collapse: collapse "forces the table to be unopened to achieve the effect.

Demo: <! -- The code is derived from aoyun.topcool.net/index.html -->

HTML code
Reference:

The code is as follows:

Copy code

--------------------------------------------------------------------------------

<TABLE cellSpacing = 0 cellPadding = 0 width = "100%" border = 1 bordercolor = "# A5C9CE">
<TBODY>
<COLGROUP>
<COL bgColor = # ffffff align = middle width = 104>
<COL class = text105 bgColor = # ffffff width = * nowrap>
<COL class = text9 bgColor = # f7fcff align = middle width = "14%">
<COL class = ef bgColor = # ffffff align = middle width = 18% nowrap>
<COL align = middle width = 10% nowrap>
<TBODY>
<TR class = "row1" align = middle bgColor = # 49a7db height = 20>
<TD> <NOBR> </TD>
<TD> <font color = "#004d69"> <B> subject </B> </font> </TD>
<TD> <font color = "#004d69"> <B> Number of topics | number of replies </B> </font> </TD>
<TD> <font color = "#004d69"> <B> last published topic </B> </font> </TD>
<TD> <font color = "#004d69"> <B> <NOBR> version master </NOBR> </B> </font> </TD>
</TR>
<TR>
<TD class = "row1"> </TD>
<TD valign = "middle" class = "row2" onmouseover = "javascript: this. style. backgroundColor = '# E9F4F7'; "onmouseout =" javascript: this. style. backgroundColor = '# f4f4f4'; ">
<Table width = "100%" style = "TABLE-LAYOUT: fixed; WORD-BREAK: break-all; border-collapse: collapse">
<Tbody>
<Tr>
<Td nowrap> <B> <a title = "Athens quiz" href = "ShowForumThreadTree. do? M = 1 & forumID = 112 "> Athens Quiz </a> </B>
</Td>
<Td nowrap> enjoy the Olympics, participate in the Olympic quiz, cheer for Chinese athletes, and win more prizes! Don't wander outside the door. Come in! </Td>
</Tr>
</Tbody>
</Table>
</TD>
<TD noWrap class = "row1"> 54/<font color = "# FF3300"> 1153 </font> </TD>
<TD nowrap class = "row2">
<Table cellspacing = "3" style = "TABLE-LAYOUT: fixed; WORD-BREAK: break-all; border-collapse: collapse">
<Tr>
<Td height = "2"> </td>
</Tr>
<Tr>
<Td align = "center" nowrap> <a title = "I love the Olympics and care about s. Don't come in if I don't like s China." href = "ShowThreadMessage. do? M = 1 & threadID = 5087 & forumID = 112 & threadPage = 1 "> do not come in if you love Olympics or care about s China. </a>

<A title = "woaiaoyun1" target = "_ blank" href = "usr_info.jsp? UserName = woaiaoyun1 "> woaiaoyun1 </a> </td>
</Tr>
<Tr> <td height = "2"> </td>
</Tr>
</Table> </TD>
<TD nowrap class = "row2"> <a title = "Olympic star" target = "_ blank" href = "usr_info.jsp? UserName = Olympic star "> Olympic Star </a>
</TD>
</TR>
</TBODY>
</TABLE>
</Td>
</Tr>
</Table>

Html method to prevent the opening of a table

The code is as follows:	Copy code
Table { Table-layout: fixed; Word-wrap: break-word; } Div { Word-wrap: break-word; }

Do not add style = "word-break: break-all ;"

For example

The code is as follows:	Copy code
: <Table width = "98%" border = "0" align = "center" cellpadding = "0" cellspacing = "0" style = "word-break: break-all; ">

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More