CSSはテキストオーバーフロー境界を省略記号として表示する(2)


  • テキストオーバーフロー境界を省略記号として表示

  • #xx{width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
                    ,          overflow:hidden  ,  text-overflow:ellipsis              。

    2.

    テキストオーバーフロー境界を改行せずに強制的に1行に表示


         #xx{width:150px;white-space:nowrap;}
    3.

    連続する長い文字列を自動的に改行

    #xx{width:150px;word-wrap:break-word;}
  • 1画素の細い枠のtableをします

  • #test{border-collapse:collapse;border:1px solid #ddd;}
    #test th,#test td{border:1px solid #ddd;}
    
    <table id="test">
    	<tr><th>  </th><td>Joy Du</td></tr>
    	<tr><th>  </th><td>26</td></tr>
    </table>


  • 方法2
  • #test{border-spacing:1px;background:#ddd;}
    #test tr{background:#fff;}
    
    <table id="test" cellspacing="1">
    	<tr><th>  </th><td>Joy Du</td></tr>
    	<tr><th>  </th><td>26</td></tr>
    </table>