ブートストラップテーブルでの省略記号の使用方法

text-overflow:ellipsisは、応答可能なテーブルでは機能しません。最初のデータは、省略記号を増加させている間は、幅が増加するcol-xs-2。ブートストラップテーブルでの省略記号の使用方法

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

出典

2016-08-25 sibaspage

だけtext-overflow: ellipsisを指定すると、任意のは、あなたが一緒に以下のスタイルを使用する必要がありますgood-しないだろう。
```
overflow: hidden; 
white-space: nowrap; 
text-overflow: ellipsis; 
```
もう一つのポイントを考慮することがtext-overflowが適用されるということですblockエレメントおよびtdは、table-cell要素。それを克服するには、範囲内のテキストをラップし、の中にabsoluteを配置してinline-blockを配置します。
```
.table .text { 
    position: relative; 
} 
.table .text span { 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    position: absolute; 
    left: 0; 
    right: 0; 
} 
.text:before { 
    content: ''; 
    display: inline-block; 
} 
```

以下に例示する：

.table .text { 
 
    position: relative; 
 
} 
 
.table .text span { 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
.text:before { 
 
    content: ''; 
 
    display: inline-block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<body> 
 

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

 
</body>

これをチェックアウトし、私はあなたのフィードバックを知ってみましょう。ありがとう！

出典

2016-08-25 15:48:42 kukkuz

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

は、あなたがこの便利を見つけた場合、私は、この、正しいようupvote /マークにお考えをお聞かせ@sibaspage。ありがとう！ – kukkuz

line-height：1; -webkit-line-clamp：1; -webkit-box-orient：vertical;オーバーフロー：隠された;表示：-webkit-box; テキストオーバーフロー：省略記号。 – sibaspage

これは私がこれまで見てきた最良の解決策です。 –

ブートストラップ4では、.text-truncateクラスを使用して次のことができます。

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

出典

2017-11-02 01:19:19 yeahlad

ブートストラップテーブルでの省略記号の使用方法

答えて

関連する問題