ahmd0
ahmd0

Reputation: 17293

Make text word-wrap in an HTML table

I have a table that is populated with the data from a database. The basic table layout is as such:

<table class="cssTable">
  <tr>
    <td class="cssRowCell1">1.</td>
    <td class="cssRowCell2">Data here</td>
  </tr>
</table>

The problem is that if a database contains a long line of text without any spaces in it, the text is not wrapped around the page and sticks out from the right side of the page.

I tried doing the following and none of these worked:

1 Added the following to CSS:

.cssRowCell2
{
    min-width: 880px;
    word-wrap: break-word;
    overflow: hidden;
}

2 Tried to add explicit table width:

<td class="cssRowCell1" width="2%">1.</td>
<td class="cssRowCell2" width="98%">Data here</td>

Any idea how to make it look good?

Upvotes: 2

Views: 4170

Answers (5)

Manivannan S
Manivannan S

Reputation: 1

Along with table cell stylesheet "word-wrap: break-word;", add "table-layout:fixed" in your table stylesheet. It will work.

Upvotes: 0

w3uiguru
w3uiguru

Reputation: 5895

Use the below code it might help you.

<table border="1" cellspacing="0" cellpadding="0" class="cssTable" style="table-layout:fixed" width="100%">
  <tr>
    <td width="8%" class="cssRowCell1">1.</td>
    <td width="92%" class="cssRowCell2">Data here   
    </td>
  </tr>
</table>

I have just added style="table-layout:fixed" on table tag and set the width 100%, It is totally depend on you that how much width you want to set for columns.

Note: Css is same as you mentioned.

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201508

To specify an optional hyphenation point in a word (in English or some other language that allows hyphenation), insert the SOFT HYPHEN U+00A0 character, or the equivalent entity reference &shy;.

To specify an optional direct line break point in a string (like foo/bar/zap), insert the markup <wbr>, which is frowned upon by W3C recommendations but works well especially if some precautions are taken ( http://www.cs.tut.fi/~jkorpela/html/nobr.html ).

In addition to these reliable (though clumsy) methods, you may consider methods that work much less often (but are more elegant), like the CSS rule hyphens: auto together with language declaration.

Upvotes: 1

raina77ow
raina77ow

Reputation: 106365

Well, there's a nice library just for that: it's called Hyphenator. ) And I'd suggest checking out this discussion, as it's pretty well commented. Rather old question, by the way. )

Upvotes: 1

jerone
jerone

Reputation: 16861

Have you tried playing around with white-space ?

Upvotes: 0

Related Questions