The css attribute that limits the number of characters I don't know why

Question

overflow:hidden;white-space:nowrap;text-overflow:elipsis;

The Divtag is broken because it doesn't have a lot of properties. I don't know the solution. I want to hear your opinion.

<div class="col boardsBox" style="margin-right:0.5%">
        <h5 style="padding-top:2%">@lang('home/main.community') 
                <a href="{{ route('community.index') }}" class="btn btn-secondary float-right"><i class="fa fa-angle-right"></i></a>
        </h5>
        <hr>
        <table>
            <tbody>
                @foreach($communities as $community)
                <tr>
                    <td style="padding-top:0.5%; overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">

                     <a class="boardsFont" href="{{ route('community.show',['boardNum'=>$community->num])}}">
                            <i class="fa fa-check-square"></i>&nbsp;{{ $community->title}}

                            @if($community->comment_count != 0)
                            <span style="color:gray">({{ $community->comment_count }})</span>
                            @endif
                        </a>

                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

You probably need to set a `width:` or `max-width:` to your `` or `` or on the `
` that contains the table. If not the elements are free to grow before they start clipping their content. — Peter B, Jun 04 '19 at 08:25
Possible duplicate of [Text-overflow CSS truncation](https://stackoverflow.com/questions/15292708/text-overflow-css-truncation) — לבני מלכה, Jun 04 '19 at 10:52

score 0 · Accepted Answer · answered Jun 04 '19 at 08:26

To get the ellipsis and overflow - you need to set a width or max-width on the element that contains the text (in this case its the td).

Note that I didn't have access to your actual content - so just used the table structure and created dummy text within the a elements to demonstrate the short text displays fine, but when the text is longer than the spedicifed max-width - the truncation occurs and the ellipsis is shown at the end of the text.

td {
  padding-top:0.5%; 
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  max-width: 300px
}

<table>
    <tbody>
        <tr>
            <td >
             <a class="boardsFont" href="#"> This is a short message </a>
            </td>
        </tr>
          <tr>
            <td >
             <a class="boardsFont" href="#"> This is a really long and extended message to demonstrate the ellipsis content</a>
            </td>
        </tr>
    </tbody>
</table>

The css attribute that limits the number of characters I don't know why

1 Answers1