Laravel: text-overflow:ellipsis does not work with displaying unescaped data-CodePudding

I'm having a problem with the property text-overflow:ellipsis.

In particular, the three points at the end of the broken line are not displayed.

Since I don't want to escape the data, since I use ckeditor (hence formatted text), I use the following wording

{!! $treatment->description !!}

for the Description column only.

This is my code:

<table id="tabledata"  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 >{{ $treatment->title }}</td>
                    <td ><span >{!! $treatment->description !!}</span></td>
                    <td >{{ $treatment->duration }} </td>
                    <td >{{ $treatment->price }} €</td>
                    <td>
                        <a  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;    
}

Can you kindly help me? I am going crazy to solve this problem

CodePudding user response：

In Laravel's Blade Templating engine, {!! !!} is used to output unescaped content, including (and not limited to) HTML tags. When combined with CKEditor, you typically get things like this:

<span >{!! $treatment->description !!}</span>
<!-- <span ><p>Something something long description of the associated Treatment</p></span> -->

Since the CSS properties are being assigned to , which now equates to ..., the properties may or may not propagate to these nested HTML elements.

If the content of {!! $treatment->description !!} is going to be consistent (i.e. always a ... element), you can simply modify the CSS to point at this nested element:

.descresize > p {
  display: inline-block;
  width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;    
}

Since the  tag only contains text, and no nested elements, this should handle the properties correctly.