table td 內容太長自動換行的例項(word-wrap和word-break的差異)
阿新 • • 發佈:2019-01-06
參考文件 :
table-layout : http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp
word-wrap 和 word-brak的差異: http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html
首先:固定table的佈局 :
table-layout: 預設是automatic , fixed 列寬由表格寬度和列寬度設定
選擇斷句:
word-wrap:break-word 先換行,如果換行可以後不溢位 td,那麼不再截斷,否則截斷
word-break: break-all 暴力,不換行直接階段
<table class="table table-hover table-bordered" style="table-layout:fixed">
<thead>
<tr>
<th>示例</th>
<th >Time</th>
</tr>
</thead>
<tbody>
<?php foreach ($account_list as $account): ?>
<tr>
<td style="word-wrap:break-word">{$account['api_example']}</td>
<td>
<div>start : {$account['created_at'] ? date('Y-m-d H:i:s', $account['created_at']) : ''}</div>
<div> end : {$account['validuntil']}</div>
</td>
</tr>
<?php endforeach ?>
</tbody>
</table>