How to put dots(...) if record length is too long than the column width and how to keep all columns in same size

.net asp.net-mvc-4 entity-framework-6 html razor

Question

This is a table in my view.

<table>
@{var counter = 1; }
<tr>
    @foreach (var item in Model)
{
        <td>
            <div class="tdWidthFixed">
            <h4 class="m0" style="color:deepskyblue">@Html.DisplayFor(modelItem => item.courseName)</h4>
            @Html.DisplayFor(modelItem => item.courseSubject)<br>
            @Html.DisplayFor(modelItem => item.institute)
                </div>
        </td>
        if (counter % 3 == 0)  //Display 3 courses at a row
    {
            @:</tr><tr> 
    }
    counter++;
}
</tr>

There are three lines in a one sell. But when displaying lengthy result lines breaks to new line. what i need to know is how to put dots(...) at the end of the line, if records are too long than the column width. And also how to make all the columns are in same size.

1
2
8/10/2015 9:18:48 AM

Accepted Answer

You can use CSS for it. Try the code below. http://codepen.io/ogzhncrt/pen/rVRYjY

 <h2>Lorem ipsum dolor sit amet, consectetur .</h2>
 <h2>Adipiscing elit. Nam ac ultricies augue.</h2>
 <h2>Donec sed mi magna. Ut convallis</h2>

<style>
    h2 {
       display: block;
       display: -webkit-box;
       width: 400px;
       margin: 0 auto;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
       overflow: hidden;
       text-overflow: ellipsis;
    }
</style>
1
8/10/2015 9:32:18 AM

Popular Answer

It is important that the div within your TD element has a width set for this to work. I applied the following 3 CSS properties and had success.

<td>
  <div style="white-space: nowrap; overflow-x:hidden; text-overflow:ellipsis;"> This is the long text which will be shorten and have the three dots added to the end  </div>
</td>


Related Questions





Related

Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow
Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow