Display of long text in a css table cell, css table cell text

Display of long text in a css table cell, css table cell text

Automatic line feed is a reasonable line feed for normal characters. Continuous numbers and English characters often increase the container size, which is a headache. The following describes how CSS implements line feed.

For div, p, and other block-level elements

The normal text line feed (Asian text and non-Asian text) element has the default white-space: normal, automatically wrap after the defined width

Html

<Div id = "wrap"> normal Text wrap (Asian text and non-Asian text) elements have the default white-space: normal, when defined </div>

Css

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

1. (IE browser) continuous English characters and Arabic numbers, use word-wrap: break-word; or word-break: break-all; implement forced line break # wrap {word-break: break-all; width: 200px ;}

Or

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

<Div id = "wrap"> abcdefghijklmnabcdefghijklmnabcdefghijklmn1111111 </div>

Effect: line breaks can be implemented.

2. (Firefox) continuous disconnection of English characters and Arabic numbers. All Firefox versions do not solve this problem. We only need to hide the characters that exceed the boundary or add a scroll bar to the container.

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

<Div id = "wrap"> abcdefghijklmnabcdefghijklmnabcdefghijklmn1111111 </div>

Effect: the container is normal and the content is hidden.

For table

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

& Lt; table width = "200" & gt;

<Tr>

<Td> abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

</Td>

</Tr>

</Table>

Effect: Hide unnecessary content

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

& Lt; table width = "200" & gt;

<Tr>

<Td width = "25%"> abcdefghigklmnopqrstuvwxyz 1234567890

</Td>

<Td> abcdefghigklmnopqrstuvwxyz 1234567890

</Td>

</Tr>

</Table>

Effect: line breaks are supported.

3. (IE browser) Embedding div and p in td and th adopts the wrap method of div and p mentioned above.

4. (Firefox) Use table-layout: fixed; to force the width of the table, use word-break: break-all, or word-wrap: break-word to form a new line, use overflow: hidden; hide the content that exceeds the limit. Here overflow: auto; cannot work.

& Lt; table width = "200" & gt;

<Tr>

<Td width = "25%"> abcdefghigklmnopqrstuvwxyz1234567890 </td>

<Td width = "75%"> abcdefghigklmnopqrstuvwxyz1234567890 </td>

</Tr>

</Table>

Effect: Hide more than content

5. (Firefox browser) nesting div and p in td and th using the methods mentioned above to deal with Firefox

Run code box

Finally, the probability of such a phenomenon is very small, but it cannot be ruled out by netizens.

 

Why are cell sizes in css tables different?

No specific setting property, and the content length is different
Solution:
1. The specific height and width,
2. The content length is the same.
1 is recommended.

How does css set the cell size in the table?

1. Use the height attribute to directly increase the height of the td cell. disadvantage: text cannot be aligned.
2. As a supplement to the vertical non-alignment of the text in the height attribute, the line-height attribute is added. If the line-height attribute is the same as the height field, the vertical center is selected, but line feed causes the spacing between the two rows to be too large.
3. padding-top padding-bottom can be used to add up and down margins. This attribute is used in the bootstrap framework to implement Table Styles. Even if there are multiple rows, the spacing is also maintained.

Or you can choose a suitable one.

. Table tr td {padding: 10px 0.