CODEWITHSUNDEEP
htmlcss
OfirH
OfirH

Reputation: 657

CSS line break in <td> tag when the text is long

I've search a lot and found a lot on diffrent answers but none work to me.

I have a table cell wiech contain changeing text. When the text is to long the table cell just get widther.

I need it to break line so the cell will have his original width.

This is my css for the table:

#userbar    {
    margin: 0 auto;
    width: 400px;
    border: 1px solid grey;
    height: 90px;
    margin-bottom: 3px;
}
#userbar table  {
    width: 400px;
    height: 90px;
}
#userbar th,td  {
    padding: 0px;
    padding-right: 3px;
    paddin-left: 3px;
    vertical-align: top;
}

This is my Html(and a little bit of php) code:

  echo "<div id='userbar'><table><tr><th colspan='2'><span style='float: right;'> Hello ".$det['p_name']."</span><span style='font-weight: normal; float:left;'>Date today:".date('d.m.Y')."</span></th>
<tr><td style='width:70px;padding:0px; vertical-align: middle;'><img src='images/logo.jpg' style='width: 70px; height: 65px; vertical-align:middle;'></td>
        <td style='font-size: 14px; width:330px;'><b>System messages</b></br>";
    if (empty($s_m))    {
        echo "there isn't any new system messages.";
    }   else    {
    echo "<span style='display: inline;'>".nl2br(mb_substr($s_m['content'],0,50,'UTF-8'))."</span>";
}
echo "</td></tr></table></div>";

I'm talking about the table cell that conatin the system message (<td style='font-size: 14px; width:330px;'>).

Thank you.

Upvotes: 1

Views: 13428

Answers (3)

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

You can use word-wrap CSS property,

td {
     word-wrap:break-word;
}

This property prevent long words break end of boundaries. another things you can set table-layout

table {
     width:300px;
     table-layout:fixed;
}

Check this Demo jsFiddle

Upvotes: 5

Al.G.
Al.G.

Reputation: 4387

Use the max-width property.
Replace this:

<td style='font-size: 14px; width:330px;'>

with this:

<td style='font-size: 14px; max-width: 330px; width:330px;'>

Upvotes: 2

user1721803
user1721803

Reputation: 1195

try using word-wrap: break-word;

Upvotes: 2

Related Questions