[CSS]文字過長時使用...表示

  • 2467
  • 0
  • CSS
  • 2017-05-19

文字長度過長時,結尾使用「...」隱藏

CSS:

.text-overflow{ 
  overflow:hidden;
  text-overflow:ellipsis;
  display:block;
  word-break:keep-all;
  white-space:nowrap;
} 

HTML:

<table style="width:100%; table-layout:fixed;">
  <tr>
    <td>
      <label class="text-overflow">我的首頁OOOOOOOOO</label>
    </td>
    <td>
      <label class="text-overflow">我的關於OOOOOOOOO</label>
    </td>
    <td>
      <label class="text-overflow">我的相片OOOOOOOOO</label>
    </td>
 </tr>
</table>

 

測試結果: