如何控制table中的資料不進行換行顯示

2021-08-27 06:43:14 字數 1616 閱讀 9580

在縮小網頁視窗時經常會出現**內的資料換行顯示的問題,導致**失真,此時只需要給**新增如下的的樣式即可:

table td,th

此時**內的資料會按照設定好的比例進行顯示,並且如果內容不能顯示完整的時候會出現橫向滾動條

看到標題你一定很輕易就會想到截斷文字加「...」的做法。哈哈,就是這樣。其實寫這篇日誌也只是把這樣方法做個記錄,因為似乎還有很多人不記得碰到這樣的情況該如何處理。

首先,先解釋一下,一般用div+css的容器中文字超出長度會浮動到框外或者把框撐大,這個一般容易解決,但是我今天就遇到了這樣的問題:在ie6下測試頁面沒反應,在ie8下測試頁面卻正常處理了溢位文字,我就鬱悶了,這個溢位處理不是ie特有的嗎?怎麼ie6卻不正常呢。後來網上查了才知道,原來ie6只支援div內寫上溢位處理才有用,而ie6以上版本寫在裡面才可以,所以我把相同的溢位處理**寫在了div中和中就正常了,汗啊!!!一下是我的處理截圖:

下面是html頁面的**:

下面是效果圖(處理後就一樣了):

這個是ie6的,這個是ie8的。

一般的文字截斷(適用於內聯與塊):

.text-overflow

對於**文字溢位的定義:

table

td

需要你注重的是,這個東東只對單行的文字的效,假如你想把它用在多行上,也只有第一行有作用的。 這個寫法只有ie會有「...」,其它的瀏覽器文字超出指定寬度時會隱藏。

[問題]

最近發現我的space在opera下瀏覽時, 右半邊竟然會變得超寬(我使用的是跟你一模一樣的排版模式), 以至於超出1024的顯示範圍、最大化視窗情況下竟然還出現了橫向滾動條. 按照你提供的方法, 把所有的模組全刪除後, 還是這樣. 百思不得其解...

用另外乙個通行證開通了乙個新的space, 採用同樣的布局排版, 在opera下卻是沒有問題!

難道是因為我期間測試了擴充套件space右側空間, 以及新增過第二個html模組[之後又刪除了]等操作, 導致將我的space**搞亂了?

[原因]

不同瀏覽器相容性問題, 確切的說, 是

不同瀏覽器對css標準執行的問題. 首先你應該知道不僅僅是opera顯示不正常, firefox也不能. 由於firefox是公認的標準瀏覽器[當然, opera也是], 且市場份額更高, 因此拿firefox來作認證.

[舉例]

1. firefox不支援ellipsis (…)屬性,即很長的一段字串會顯示省略號.

text-overflow: ellipsis;

這個在空間日誌編輯頁面的日誌選項裡就有應用, 你如果輸入很長的類別名, 回來編輯該日誌會發現原來的類別名在ie中會顯示前面部分, 後面直接用省略號代替, 而在firefox等瀏覽器下會顯示很長直到撐破介面框架.

2. 在firefox中,

style="overflow:hidden"僅僅工作於而不是或者等等

.bvwordwrap

而 在firefox等瀏覽器中, word-wrap這個屬性是不被識別的, 因為該css屬性不符合w3的標準, 應該用white-space:normal;來代替, 這樣在firefox和ie下就都能正確換行. 而且要注意,

單詞間的空格不能用 來代替, 不然不能正確換行.

爬蟲5 如何取Table中的值

def detail self,response item response.meta item 名稱 item disease name response.xpath html body section 1 header div 1 a h1 text extract 0 根據一級class和二級...

html中如何讓table顯示的更好

在html檔案編寫中,經常使用到table來做一些 如何讓它顯示的更像一張 接下來為你講解。基本格式 我的一張 姓名年齡 班級 張山 20計算機1班 顯示效果如下 看起來顯得有點擠,讓他的寬度增加就是設定table的width屬性。想讓單元格之間是一條實線分割,設定table的cellspacing...

js動態寫入table中的資料

按照這個系統寫的乙個小的web程式,前端額頁面極其的醜陋,只是簡單的把動態寫入table儲存一下,話不多說上 ajax datatype json url book?action booklist success function data document.getelementbyid alter...