[Bootstrap] Text Wrapping and Overflow 처리.

[공식문서]

https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow

 

bootstrap 4.x 사용 하면서 inline css 나 별의 별 짓을 다 해봤으나 적용이 안되다가 위 문서 보고 처리 했습니다.

<div class="container-fluid">
  <div class="card">
    <div class="card-body">
      <div class="table-responsive">
        <table class="table">
          <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">장치 인증서 ID</th>
            <th scope="col">장치 인증서 ARN</th>
            <th scope="col">상태</th>
            <th scope="col">생성일</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <th scope="row">1</th>
            <td>
              <span class="d-inline-block text-truncate" style="max-width: 150px;">
              262a1ac8a7d8aa72f6e96e365480f7313aa9db74b8339ec65d34dc3074e1c31e
              </span>
            </td>
            <td>
              <span class="d-inline-block text-truncate" style="max-width: 150px;">
                arn:aws:iot:us-west-2:123456789012:cert/262a1ac8a7d8aa72f6e96e365480f7313aa9db74b8339ec65d34dc3074e1c31e
              </span>
            </td>
            <td>ACTIVE</td>
            <td>1546447050.885</td>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

 

예제)

<!-- Block level -->
<div class="row">
  <div class="col-2 text-truncate">
    Praeterea iter est quasdam res quas ex communi.
  </div>
</div>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
  Praeterea iter est quasdam res quas ex communi.
</span>