javascript – Crop text from a cell in a dynamic table in MVC ASP.NET

what happens is that I'm making a dynamic table in HTML, when filling this table with the model one of the cells extends too much since this contains a lot of text, what I would like to do is cut out the text of said cell and place a label that says "see more", and when clicking "see more" all the text is shown in that cell and the label changes to "show less".

my HTML table is this:

@foreach (var item in Model)         { }
@ Html.DisplayName ("Client") @ Html.DisplayName ("Pla") @ Html.DisplayName ("Region") @ Html.DisplayName ("OP") @ Html.DisplayName ("Quantity") @ Html.DisplayName ("Reference") @ Html.DisplayName ("Amount") @ Html.DisplayName ("Date") @ Html.DisplayName ("ID") @ Html.DisplayName ("Notes")
@ Html.DisplayFor (modelItem => item.Name) @ Html.DisplayFor (modelItem => item.NoPl) @ Html.DisplayFor (modelItem => item.NoRegion) @ Html.DisplayFor (modelItem => item.OP) @ Html.DisplayFor (modelItem => item.quantity) @ Html.DisplayFor (modelItem => item.REf) @ Html.DisplayFor (modelItem => item.ImportFacture) @ Html.DisplayFor (modelItem => item.Mes) @ Html.DisplayFor (modelItem => item.ID)
@ Html.DisplayFor (modelItem => item.Notes)

Read more

The note field is where the text is too large.
I have tried with this javaScript code but it only works for a specific text:
javaScript code: