TD元素的nowrap屬性

2021-05-05 22:19:38 字數 968 閱讀 5985

html中,在td建立時有個nowrap屬性可以讓我們來定義,這個屬性究竟有什麼用處,可以完成什麼樣的功能呢?

html中td元素的nowrap屬性表示禁止單元格中的文字自動換行。

但使用時要注意的是,td元素nowrap屬性的行為與td元素的width屬性有關。如果未設定td寬度,則nowrap屬性起作用的,如果設定了td寬度,則nowrap屬性不起作用。

nowrap詳細解說:

nowrap表示是否允許**中的文字換行

nowrap=true的時候不能換行

nowrap=false可以換行

且,結合自身經驗,即使是**設定了td的width屬性,其實nowrap也是起了作用了的,即,在內容超過了td的寬度時,內容才會出現換行,並且防止td的寬度被擠壓,保證td能夠真實的占有其自身定義的width,如果此時行中td的寬度之和大於**的現有寬度了,那麼**會增加自身的寬度來適應td寬度之和,而不是由**的寬度來限制td的寬度[不定義nowrap的情況是,td的寬度會被盡量擠壓以適應**的總寬度定義]

比較經典的情況是: 比如現在有乙個**巢狀在乙個可以有滾動條的div層或者是iframe中,如果該**的列數是不定的,而我們想要實現的效果是,如果**的列數增加,那麼就讓**的寬度也隨著增加,如果**的寬度超過了div層或iframe定義的寬度,那麼就讓div層或iframe出現滾動條,我們通過拖動滾動條來檢視**全部列的內容。此時如果我們不定義td列的nowrap屬性,那麼**的寬度就不會自動隨著列數的增加而自動增加,他會在原有**寬度的基礎上,擠壓其他的td來放置新增加的td,直到徹底無法擠壓為止[如,各列都已成為單字寬,連續的字母或數字算作乙個單字],此後才有可能去增加**的寬度,即使我們不去人為的定義**的總寬度,情況也是一樣的,因為**(table)在不定義寬度的情況下預設是寬100%的,這個時候,我們就需要對某一行[一般選作第一行]的所有td都定義nowrap="nowrap"或nowrap=true來防止td被擠壓,實現列增加[或列的寬度增加]**的寬度也增加的效果。

TD不換行 nowrap屬性

為了讓 裡文字不換行 預計也不會太長的字串 可以給 裡td新增乙個nowrap屬性,如 文字內容 這樣。但是如果給每個td都加上nowrap屬性,貌似太繁瑣並且占用空間和流量。於是乎,我找css的實現方法,不擅長此術,嘗試了n多個樣式後,找到white space nowrap 貌似跟直接給td加n...

用nowrap實現div內的元素不換行

在編寫自定義外掛程式my slider的過程中,發現無論float還是inline block均不能保證div內的內容不換行 這兩個屬性在內容超出容器尺寸後,均將剩餘內容做換行處理 在瀏覽器內比較了自己定義的my slider item和mui框架定義的mui slider item,發現其用了 w...

用nowrap實現div內的元素不換行

在編寫自定義外掛程式my slider的過程中,發現無論float還是inline block均不能保證div內的內容不換行 這兩個屬性在內容超出容器尺寸後,均將剩餘內容做換行處理 在瀏覽器內比較了自己定義的my slider item和mui框架定義的mui slider item,發現其用了 w...