CODEWITHSUNDEEP
htmlcssasp.net-mvc
Tharani Gnanasegaram
Tharani Gnanasegaram

Reputation: 317

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

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>

Upvotes: 7

Views: 12139

Answers (4)

Tharani Gnanasegaram
Tharani Gnanasegaram

Reputation: 317

<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 also useful. But it splits word also.

Upvotes: 0

Md Hasan Ibrahim
Md Hasan Ibrahim

Reputation: 1898

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.

Upvotes: 2

Sandip - Frontend Developer
Sandip - Frontend Developer

Reputation: 14689

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>

Upvotes: 3

Super User
Super User

Reputation: 9642

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>

Upvotes: 10

Related Questions