在html表中分割並查看多行中的長句

在我看來，我必須將長句子分成HTML表中的多行。我使用了一段代碼，但它不起作用，因爲我不想剪輯該句子。我想用多行顯示整個句子。在html表中分割並查看多行中的長句

這是我使用的代碼行：

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

來源

2017-04-25 Tharani Gnanasegaram

您可以使用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>

來源

2017-04-25 04:52:27

第二個工作。謝謝 –

我覺得表單元格默認中斷你的句子在word-wrap:break-word這樣的多行中，如果你想break-all那麼只有你可以使用@Super User建議的樣式。

檢查我的默認斷線的代碼片段：

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

來源

2017-04-25 04:59:53

它的工作原理。謝謝 –

如果你想你的句子被分配到多行，不想的話就被打破（我假設你正在尋找），使用：

word-break: keep-all;

但是，如果你想要分裂成多行的話，當它溢出容器，使用方法：

word-break: break-all;

注：word-break是CSS3財產。所以，所有的瀏覽器都不支持它。它完全不支持Opera mini和IE版本之前的版本11.但主要由現代瀏覽器支持。你可以看到支持的瀏覽器here。

來源

2017-04-25 05:13:51

謝謝@Hasan。有用 –

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

這對我工作正常。

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

這也很有用。但它也分裂了詞。

來源

2017-05-08 04:57:58

在html表中分割並查看多行中的長句

回答

相關問題