国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
html 用css實(shí)現(xiàn)table中超長字符串省略號表示 - 天天好心情 - 博客園
最近學(xué)習(xí)樣式,想用樣式來控制GridView中超長字符的省略顯示,可是網(wǎng)上從后臺的方式是在讓我詬病,當(dāng)然,個(gè)人喜好問題:P  由于GridView最終是Table形式輸出,于是從table實(shí)現(xiàn)該樣式找起:
這是從網(wǎng)上找到的一篇文章:
不記得是什么時(shí)候,有人在用table模擬DataGrid的時(shí)候說,為什么td超出設(shè)置為固定寬度的文字不能隱藏,而是會(huì)直接換行呢?

  是的,事實(shí)確實(shí)如此,如:

<style type="text/css">
table {width:500px;;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
td {white-space:nowrap;overflow:hidden;}
</style>
<table border="1" cellspacing="0" summary="回頭來看看Table:TD也玩overflow:hidden">
 <tr>
  <td class="col1">神舟 優(yōu)雅Q400N</td>
  <td class="col2">優(yōu)雅Q400N,采用Intel Core2 Duo(Merom) T5450(1.66G)處理器</td>
  <td class="col3">迅馳4平臺,突出的性價(jià)比,漂亮的外觀</td>
 </tr>
</table>

  運(yùn)行如上代碼,你會(huì)發(fā)現(xiàn)單元格里超過固定寬度的文字不會(huì)被隱藏掉,而是換行顯示了,顯然,這并不是我的本意。

  看起來,這似乎是table的一個(gè)特性,它不能很好的支持{width:*px;white-space:nowrap;overflow:hidden;}的組合,說到底就是white-space:nowrap這個(gè)東東沒起作用,所以看起來overflow:hidden就失效了。{注:如果是一連串的無意義字符則可生效,例如:<td class="col1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>,這個(gè)時(shí)候就不需要{white-space:nowrap}來強(qiáng)制它在一行內(nèi)顯示,因?yàn)檫@一連串的a會(huì)被認(rèn)定為是一個(gè)字而不發(fā)生換行,從而超出.col1寬度的a會(huì)被隱藏}

  [解決方案一:]

  后來有人提到使用百分比寬度就可以了,經(jīng)測試,確實(shí)可以,稍微將第一段的其中幾行樣式修改一下,其它的不變:

.col1 {width:20%;}
.col2 {width:40%;}
.col3 {width:40%;}

  將修改后的代碼運(yùn)行后,會(huì)發(fā)現(xiàn),超出寬度的文字果然被隱藏了,想要的效果似乎得到了。

  事實(shí)上使用百分比寬度確實(shí)可以解決這個(gè)文字隱藏的問題,但這似乎并不是想要的最佳的解決方案,因?yàn)橛械臅r(shí)候我們需要的是一個(gè)固定的寬度,而不是百分比寬度。

  而這一切的根源就在于如何使得單元格內(nèi)的文字不換行在一行內(nèi)顯示。

 ?。?strong>解決方案二:]

  要達(dá)到這個(gè)要求,除了使用樣式,我們也許還會(huì)想到一個(gè)許久不用了的標(biāo)簽<nobr>,這個(gè)元素的作用就是強(qiáng)制內(nèi)容在一行顯示。以上代碼做如下修改,其它則不變:

<table border="1" cellspacing="0" summary="回頭來看看Table:TD也玩overflow:hidden">
 <tr>
  <td class="col1"><nobr>神舟 優(yōu)雅Q400N</nobr></td>
  <td class="col2"><nobr>優(yōu)雅Q400N,采用Intel Core2 Duo(Merom) T5450(1.66G)處理器</nobr></td>
  <td class="col3"><nobr>迅馳4平臺,突出的性價(jià)比,漂亮的外觀</nobr></td>
 </tr>
</table>

  做了這個(gè)修改,會(huì)發(fā)現(xiàn),效果確實(shí)達(dá)到,是不是該興奮呢?不,這似乎還不是最佳的解決方案,因?yàn)楫吘故褂昧艘粋€(gè)許久不用且不推薦使用的元素標(biāo)記,這多少讓人覺得有點(diǎn)不爽。

  沿著這個(gè)思路,我換了一個(gè)角度來考慮這個(gè)問題,發(fā)現(xiàn)問題迎刃而解。

  既然在固定寬度的單元格內(nèi)無法只簡單的給th,td加上white-space:nowrap,那么我們在固定寬度的單元格內(nèi)再加一個(gè)標(biāo)記元素呢?

最佳方案:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>回頭來看看Table:TD也玩overflow:hidden</title>
<meta name="Author" content="Doyoe(飄零霧雨), edzmaster@gmail.com" />
<style type="text/css">
table {width:500px;;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
th strong {display:block;width:100%;}
tr strong,tr td {white-space:nowrap;overflow:hidden;}
</style>
</head>
<body>
<table border="1" cellspacing="0" summary="測試">
<thead>
 <tr>
  <th class="col1"><strong>產(chǎn)品名稱</strong></th>
  <th class="col2"><strong>產(chǎn)品介紹</strong></th>
  <th class="col3"><strong>產(chǎn)品備注</strong></th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>神舟 優(yōu)雅Q400N</td>
  <td>優(yōu)雅Q400N,2007年7月上市,采用Intel Core2 Duo(Merom) T5450(1.66G)處理器</td>
  <td>迅馳4平臺,突出的性價(jià)比,漂亮的外觀</td>
 </tr>
</tbody>
</table>
</body>
</html>

  運(yùn)行上面的代碼,會(huì)發(fā)現(xiàn)這樣的做法是可以的,而且從代碼的簡潔性、可讀性和合理性幾方面來說,都較前幾種方案為好。

接下來說說自己的使用:
首先用tbody在GridView中是不太現(xiàn)實(shí)的,除非你繼承了GridView做控件,那么目前的做法似乎只有用百分比的形式,因?yàn)椴恢罏槭裁?white-space屬性根本不生效,唉,繼續(xù),希望能找到更好的方式,也希望大家拍磚!

本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
手機(jī)端的一個(gè)寬度計(jì)算問題(一)
CSS FireFox and IE 換行問題解決方案
css之自動(dòng)換行
html table td過長解決辦法
4 行 CSS 實(shí)現(xiàn)【表格內(nèi)容超過一行的部分,用省略號代替】【支持 IE6】
Div+CSS規(guī)則整理之六-常用CSS細(xì)節(jié)處理樣式
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服