Encountering an issue with the property text-overflow:ellipsis.
The ellipsis at the end of the truncated text is not showing up as expected.
To maintain formatting without escaping data in ckeditor, I am using:
{!! $treatment->description !!}specifically for the Description column.
This snippet represents my code:
<table id="tabledata" class="table table-striped hover" style="width:100%">
<thead>
<tr>
<th></th>
<th>Title</th>
<th>Description</th>
<th>Stay</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach ($treatments as $treatment)
<tr>
<td></td>
<td class="p-4">{{ $treatment->title }}</td>
<td class="p-4"><span class="descresize">{!! $treatment->description !!}</span></td>
<td class="p-4">{{ $treatment->duration }} </td>
<td class="p-4">{{ $treatment->price }} €</td>
<td>
<a class="btn btn-primary" href="{{route('treatment.edit', compact('treatment'))}}" role="button">Update</a>
</td>
</tr>
@endforeach
</tbody>
</table>
CSS
.descresize{
display: inline-block;
width: 500px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Seeking assistance to resolve this perplexing issue. Any help would be greatly appreciated!