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>

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

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

Solution 3

If you want your sentence to be distributed into multiple lines and don't want the words to be broken(which I assume you are looking for), use:

 word-break: keep-all;

But if you want to break the words into multiple lines when it overflows the container, use:

word-break: break-all;

Note: word-break is a CSS3 property. So, it is not supported by all of the browsers. It's totally not supported in Opera mini and IE versions before 11. But mostly supported by the modern browsers. You can see the supported browsers here.