0
タグにユーザー名を含むテーブルがあります。私はテーブルを応答し、長いユーザー名を処理できるようにする必要があります。テーブルが縮小するにつれて、私はラップするための名字が必要ですが、それが縮小し続けると、名前が途切れ始めると省略記号が表示されます。私はこの仕事をするのに苦労しています。テーブルで動作するテキストオーバーフローを取得する方法タグ
どのように応答する方法でユーザー列を縮小させるのですか。上記のようにテキストをどのように動作させるのですか？
.leaderboard {
max-width: 800px;
}
.media-left, .media-body {
display: table-cell;
vertical-align: middle;
}
.media-left {
padding-right: 10px;
}
td a {
padding: 5px;
display: block;
text-decoration: none;
color: inherit;
}
.user-column {
max-width: 225px;
}
.leaderboard .name {
display: inline-block;
}
.truncate {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet"/>
<table id="user-leaderboard" class="leaderboard table table-condensed">
<colgroup><col>
<col>
<col width="22%">
<col width="22%">
<col width="22%">
</colgroup><thead>
<tr>
<th class="text-center">Rank</th>
<th>User</th>
<th class="text-center">dataset1 </th>
<th class="text-center">dataset2 </th>
<th class="text-center">dataset3 </th>
</tr>
</thead>
<tbody class="user-rows">
<tr class="clickable-row" id="">
<td class="text-center"><a href="#">1</a></td>
<td class="user-column">
<a href="#">
<div class="media">
<div class="media-left media-middle">
<img class="img-rounded" src="http://twemoji.maxcdn.com/36x36/1f47e.png" width="36px">
</div>
<div class="media-body media-middle">
<div class="name truncate">First</div>
<div class="name truncate">Last</div>
</div>
</div>
</a>
</td>
<td class="text-center sort-column"><a href="#">6</a></td>
<td class="text-center "><a href="#">9</a></td>
<td class="text-center "><a href="#">3</a></td>
</tr>
<tr class="clickable-row" id="leaderboard-user-row">
<td class="text-center"><a href="#">2</a></td>
<td class="user-column">
<a href="#">
<div class="media">
<div class="media-left media-middle">
<img class="img-rounded" src="http://twemoji.maxcdn.com/36x36/1f47e.png" width="36px">
</div>
<div class="media-body media-middle">
<div class="name truncate">Reallyreallyrealylreallylongfirstname</div>
<div class="name truncate">Reallyreallyreallyreallyreallylonglastname</div>
</div>
</div>
</a>
</td>
<td class="text-center sort-column"><a href="#">4</a></td>
<td class="text-center "><a href="#">3</a></td>
<td class="text-center "><a href="#">3</a></td>
</tr>
<tr class="clickable-row" id="">
<td class="text-center"><a href="#">3</a></td>
<td class="user-column">
<a href="#">
<div class="media">
<div class="media-left media-middle">
<img class="img-rounded" src="http://twemoji.maxcdn.com/36x36/1f47e.png" width="36px">
</div>
<div class="media-body media-middle">
<div class="name truncate">Firstname</div>
<div class="name truncate">Lastnamelong</div>
</div>
</div>
</a>
</td>
<td class="text-center sort-column"><a href="#">3</a></td>
<td class="text-center "><a href="#">2</a></td>
<td class="text-center "><a href="#">3</a></td>
</tr>
</tbody>
</table>
ジャスト '最大幅を移動：225px;' '.user-COLUMN'からtruncated''へ。 – ezakto
@ezaktoこれは近いと思われますが、データ列のようなレスポンスでウィンドウのサイズ変更時にユーザー列を縮小したいと考えています。これをどうすればいいのですか？ – user4584963
テーブル見出しがもう縮小できなくなるまで、列は縮小します。 「データセット」ヘッダーを1文字に変更し、再度ウィンドウのサイズを変更してみてください。それはもう少しやります。すべてのテーブルを処理する "反応的な方法"はありません。一般的な方法は、ビューポートが狭すぎるときにテーブルに水平スクロールを追加することです。 – ezakto