Question

在我看来，我必须将长句子分成HTML表格中的多行。我使用了一个代码，但它不起作用，因为我不想剪辑句子。我想用多行显示整个句子。

这是我使用的代码行：

 <td class="col-md-3" style="overflow-wrap:break-word;text-overflow:clip;">@Html.DisplayFor(ModelItem => item.Note, new { @class = "note" })</td>

Answer 1

您可以将word-wrap:break-word用于此

<td class="col-md-3" style="word-wrap:break-word;">@Html.DisplayFor(ModelItem => item.Note, new { @class = "note" })</td>

如果你想包装大字，那么你可以使用word-break: break-all

<td class="col-md-3" style="word-break: break-all;">@Html.DisplayFor(ModelItem => item.Note, new { @class = "note" })</td>

Answer 2

我认为表格单元格默认中断你的句子在多行如word-wrap:break-word，如果你想要break-all那么只有你可以使用@Super User建议的样式。

检查我的代码段是否有默认的分隔线：

＆＃13;

<table style="border:1px solid #CCC;width:100%">
        <tr  id="accounting" >
            <td>1</td>
            <td>Doe</td>
            <td>John</td>
            <td style="word-break: break-word;">Accounting Personnel testing long line and going to split in two lines if succedd will go ahead.</td>
            <td>
                <div class="actions pull-right approvers">Div
                    <a href="#"><i class="fa fa-close" title="remove approvers"></i>Click</a>
                </div>
            </td>
        </tr>
        <tr  id="hr" >
            <td class="left"><a>errrrr</a></td>
            <td>Doe</td>
            <td>Luke</td>
            <td>HR Personnel</td>
            <td>
                <div class="actions pull-right approvers">Div
                    <a href="#"><i class="fa fa-close" title="remove approvers"></i>Click</a>
                </div>
            </td>
        </tr>
        <tr  id="crm" >
            <td>3</td>
            <td>Doe</td>
            <td>Mark</td>
            <td>CRM Personnel</td>
            <td>
                <div class="actions pull-right approvers">Div
                    <a href="#"><i class="fa fa-close" title="remove approvers"></i>Click</a>
                </div>
            </td>
        </tr>
    </table>

＆＃13;

Answer 3

如果您希望将句子分成多行并且不希望单词被破坏（我假设您正在寻找），请使用：

 word-break: keep-all;

但是如果你想在溢出容器时将单词分成多行，请使用：

word-break: break-all;

注意： word-break是 CSS3 属性。因此，并非所有浏览器都支持它。在11之前的 Opera mini 和 IE 版本中完全不支持它。但是现代浏览器主要支持它。您可以看到支持的浏览器here。

在html表

3 个答案: