CSS使文本溢出边界显示为省略号(2)

  1. 使文本溢出边界显示为省略号

#xx{width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
首先需设置将文本强制在一行内显示,然后将溢出的文本通过overflow:hidden截断,并以text-overflow:ellipsis方式将截断的文本显示为省略号。

2.

使文本溢出边界不换行强制在一行内显示

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


3.

使连续的长字符串自动换行

#xx{width:150px;word-wrap:break-word;}


  1. 做1像素细边框的table

  2. #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>

方法二

  1. #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>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章