Question

我经常搜索并找到很多不同的答案，但没有一个对我有用。

我有一个表格单元格包含更改文本。当文本很长时，表格单元格就会变得更加干净。

我需要它来打破线，这样单元格将具有原始宽度。

这是我的css表：

#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;
}

这是我的Html（和一点点php）代码：

  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>";

我说的是表格系统消息（<td style='font-size: 14px; width:330px;'>）。

谢谢。

Answer 1

您可以使用自动换行 CSS属性

td {
     word-wrap:break-word;
}

此属性可防止长词突破边界结束。您可以设置的另一件事table-layout

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

检查 Demo jsFiddle

Answer 2

使用max-width属性替换这个：

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

用这个：

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

Answer 3

尝试使用word-wrap: break-word;

文本很长时，标签中的CSS换行符

3 个答案: