web-dev-qa-db-ja.com

bootstrapレスポンシブテーブルでの省略記号の使用方法

レスポンシブテーブルtext-overflow:Ellipsisは、thでデータが増加すると機能しません（col-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>
htmlcsstwitter-bootstraptwitter-bootstrap-3css-position
15
sibaspage

Bootstrap 4の時点で、.text-truncateクラス。

<th class="col-xs-2 d-inline-block text-truncate" style="max-width: 150px;">

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

15
yeahlad

Bootstrap 4を使用すると、.text-truncateクラス。関連するコンポーネントにこれらのスタイルを自動的に追加します。

.text-truncate{
    overflow: hidden;
    text-overflow: Ellipsis;
    white-space: nowrap;
}

次に、要素の最大幅を設定して、より信頼性の高い出力を取得できます。

2
Lasantha

bootstrap 4：の別の提案

https://Gist.github.com/marcoskubis/4bf343928703824d85d0ec1b301f3a6

.table.table-Ellipsis tbody td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: Ellipsis;
    white-space: nowrap
}
0
Tom John