分割して複数の行をHTMLテーブルで表示

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-break: break-all

を使用することができ、この

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

ためword-wrap:break-wordを使用することができます

<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ユーザーによって提案されたスタイルを使用することができます。

デフォルト区切り線のための私のコードスニペットを確認：あなたはあなたの文は複数行に分配されるようにしたいとの言葉が破壊されたくない場合はどのI（

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

Answer 3

をあなたが探していると仮定します）、使用：

word-break: keep-all; 

しかし、あなたがオーバーフロー時に複数の行に単語を分割したい場合コンテナ、使用：

word-break: break-all; 

注：word-breakCSS3プロパティです。したがって、すべてのブラウザでサポートされているわけではありません。 Opera MiniとIEバージョン11ではサポートされていませんが、ほとんどの場合現代のブラウザでサポートされています。サポートされているブラウザhereが表示されます。

Answer 4

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

これも便利です。しかしそれはまた単語を分ける。