부트 응답 테이블에서 생략 기호를 사용하는 방법

묘사

의 데이터가 증가할 때text-overflow:ellipsis의 폭이 증가함에 따라 응답표thcol-xs-2는 작용하지 않는다.
enter image description here
코드는 다음과 같습니다.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th class="col-xs-2" style="text-overflow: ellipsis;">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</th>
        <th class="col-xs-1">Firstname</th>
        <th class="col-xs-1"> Lastname</th>
        <th class="col-xs-4">Age</th>
        <th class="col-xs-2">City</th>
        <th class="col-xs-2">Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
      </tr>
    </tbody>
  </table>
</div>

적합한 솔루션

The text-overflow property only affects content that is overflowing a block container element in its inline progression direction MDN

text-overflow를 적용하려면 개별적으로 text-overflow: ellipsis를 지정하면 아무런 이점이 없습니다. - 다음 스타일도 함께 사용해야 합니다.
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
span, div, th, td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100px;
}
<span>Inline element overflow ellipsis do not work</span>
<div>Block elements overflow ellipsis works</div>
<table>
  <tr><th>Table - Overflow test</th></tr>
  <tr><td>This is a long text</td><td>This is a long text</td></tr>
</table>
테이블 레이아웃의 텍스트 오버플로우
그래서 text-overflowblock 요소에 적용되지만 tdtable-cell 요소이다. 표는 항상 처리하기 어렵다. 왜냐하면 기본적인 표 레이아웃 알고리즘을 사용하기 때문이다.테이블과 해당 셀의 폭은 해당 컨텐트에 따라 조정됩니다.
  • 일반적으로 생략 기호를 가져오는 일반적인 속성을 지정하면 유효할 수 있습니다.
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    
  • 작용하지 않거나 테이블 알고리즘이 당신을 속이는 것을 보기 시작하면 max-width: 0과 함께 사용할 수 있습니다.
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 0;
    
    .table .text {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-width: 0;
    }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th class="col-xs-2 text">
              Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
              </th>
              <th class="col-xs-1">Firstname</th>
              <th class="col-xs-1">Lastname</th>
              <th class="col-xs-4">Age</th>
              <th class="col-xs-2">City</th>
              <th class="col-xs-2">Country</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
            </tr>
          </tbody>
        </table>
      </div>
  • 의 또 다른 기교는 spanabsolute 위조 요소로 텍스트를 tdwidth: 100%에 포장하는 것이다.
    .table .text {
      position: relative;
    }
    
    .table .text span {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      position: absolute;
      width: 100%;
    }
    
    .text:before {
      content: '';
      display: inline-block;
    }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th class="col-xs-2 text">
                <span>
              Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</span>
              </th>
              <th class="col-xs-1">Firstname</th>
              <th class="col-xs-1">Lastname</th>
              <th class="col-xs-4">Age</th>
              <th class="col-xs-2">City</th>
              <th class="col-xs-2">Country</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
            </tr>
          </tbody>
        </table>
      </div>