Geek Answers Handbook

Split and view a long sentence in several rows of the html table.

In my opinion, I should split long sentences into several lines in the HTML table. I used the code, but it did not work, because I do not want to remove the sentence. I want to show the whole sentence in several lines.

This is the line of code I used:

<td class="col-md-3" style="overflow-wrap:break-word;text-overflow:clip;">@Html.DisplayFor(ModelItem => item.Note, new { @class = "note" })</td>
+7
html css asp.net-mvc
source share
4 answers

You can use word-wrap:break-word for this

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

if you want to wrap a big word, you can use word-break: break-all

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

I think the table by default splits your sentence into several lines, for example word-wrap:break-word , if you want break-all , then you can only use the style suggested by @Super user.

Check out my code snippet for the default interrupt string:

 <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>
+3
source share

If you want your sentence to be spread over several lines and not want the words to be broken (which, I believe, you are looking for), use:

  word-break: keep-all;

But if you want to split the words into several lines when overflowing the container, use:

 word-break: break-all;

Note. word-break is a CSS3 property. Therefore, it is not supported by all browsers. It is not fully supported in versions of Opera mini and IE prior to 11. But it is mainly supported by modern browsers. You can see supported browsers here .

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

This worked for me correctly.

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

This is also useful. But he also breaks the word.

0
source share

More articles:


All Articles