부트스트랩 테이블의 내용이 너무 길면 줄임표를 사용하여 자세한 설명을 표시합니다.

이 글에서는 부트스트랩 테이블의 내용이 너무 길 때 표시하기 위해 줄임표를 사용하는 솔루션을 주로 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

먼저 부트스트랩의 td 내용이 내가 지정한 고정 너비를 초과하는 경우 줄임표를 대체하는 코드는 다음과 같습니다. 모바일 시뮬레이터는 이렇습니다. 별로 편하지 않아요. 제가 준 너비에 따라 표시되지 않습니다. 내용에 따라 모두 압착됩니다.

해결책:

<table class="table table-bordered">
   <thead>
     <tr>
       <th class="center" style=&#39;width:38%;&#39;>商品名称</th>
       <th class="center" style=&#39;width:36%;&#39;>详细介绍</th>
       <th class="center" style=&#39;width:22%;&#39;>购买数量</th>
     </tr>
   </thead>
   <tbody id="tbody">
     <tr>
      <td>自由行机票享超值优惠</td>
      <td>随心所欲安排行程</td>
      <td>70</td>
    </tr>
    <tr>
      <td>自由行机票享超值优惠</td>
      <td>随心所欲安排行程</td>
      <td>70</td>
    </tr>   
    <tr>
      <td>自由行机票享超值优惠</td>
      <td>随心所欲安排行程</td>
      <td>70</td>
    </tr>            
   </tbody>               
 </table>
.table tbody tr td{
   overflow: hidden; 
   text-overflow:ellipsis; 
   white-space: nowrap; 
 }

즉, 스타일을 추가합니다.

<table class="table table-bordered" style=&#39;table-layout:fixed;&#39;>

효과가 나타납니다.

table-layout은 표 셀, 행 및 열에 대한 알고리즘 규칙을 표시하는 데 사용됩니다. 값 설명

자동 기본값. 열 너비는 셀 내용에 따라 설정됩니다.

고정 열 너비는 테이블 너비와 열 너비에 따라 설정됩니다.

inherit는 테이블 레이아웃 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

관련 권장 사항:

CSS는 표시되는 단어 수를 제한하고 줄임표를 사용하여 초과분을 나타냅니다.

추가 단어를 숨기고 줄임표로 바꾸는 방법

css 여러 줄 줄임표 호환 작성 방법

위 내용은 부트스트랩 테이블의 내용이 너무 길면 줄임표를 사용하여 자세한 설명을 표시합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!