html - 当文本很长时 标签中的 CSS 换行符

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

您可以使用 word-wrap CSS 属性，

td {
     word-wrap:break-word;
}

此属性可防止长单词越界。您可以设置的其他内容 table-layout

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

检查这个 Demo jsFiddle