Podziel i zobacz długie zdanie w wielu wierszach tabeli html

Question

Moim zdaniem muszę podzielić długie zdania na wiele wierszy w tabeli HTML. Użyłem kodu, ale nie zadziałało, ponieważ nie chcę przypinać zdania. Chcę pokazać całe zdanie w wielu wierszach.

Jest to linia kodu użyłem:

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

Answer 1

Można użyć word-wrap:break-word tego

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

jeśli chcesz zawinąć duże słowo to można użyć 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

Myślę, że komórka tabeli domyślny podział twoje zdanie w wielu wierszach, takich jak word-wrap:break-word, jeśli chcesz break-all wtedy tylko możesz użyć stylu, jak sugeruje @Super User.

Sprawdź mój fragment kodu dla linii domyślnej zerwaniu:

<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

Jeśli chcesz, aby Twoje zdanie zostać rozdzielone na wiele linii i nie chcą słowa się być uszkodzony (co ja Załóżmy, że szukasz), użyj:

word-break: keep-all; 

Ale jeśli chcesz podzielić słowa na wiele linii, gdy przepełnia się pojemnik, należy:

word-break: break-all; 

Uwaga:word-break jest CSS3 nieruchomość. Tak więc nie jest obsługiwana przez wszystkie przeglądarki. Jest całkowicie nieobsługiwany w wersjach wcześniejszych niż 11. W większości obsługiwany przez nowoczesne przeglądarki. Możesz zobaczyć obsługiwane przeglądarki 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> 

To działało dla mnie poprawnie.

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

Jest to również przydatne. Ale również dzieli słowo.