css屬性限制了我不知道為什么的字符數

Question

溢出：隱藏;空格：NOWRAP;文本溢出：省略號;

Divtag被破壞，因為它沒有很多屬性。 我不知道解決方案。 我想聽聽你的意見。

<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>

Answer 1

要獲得省略號和溢出 - 您需要在包含文本的元素上設置寬度或最大寬度（在本例中為td ）。

請注意，我無法訪問您的實際內容 - 因此只使用表結構並在元素中創建虛擬文本以演示短文本顯示正常，但是當文本長度超過最大寬度時 - 截斷發生，省略號顯示在文本的末尾。

 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>