Split and view the long sentence in multiple lines in html table

Question

In my view I have to split the long sentences into multiple lines in an HTML table. I used a code but it didn't work as I don't want to clip the sentence. I want to show the whole sentence in multiple lines.

This is the code line I used:

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

Answer 1

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 big word then 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>

Answer 2

I think table cell default break your sentence in multiple line like word-wrap:break-word , if you wants to break-all then only you can use style as suggested by @Super User.

Check my code snippet for default break line:

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