flex布局中,子標籤超出父標籤

2021-10-01 14:37:37 字數 819 閱讀 9596

flex布局中,一側故寬,另一側flex :1後,自元件撐開超出父元件

大致是有乙個main容器是flex布局,左邊乙個logo固定寬高,右邊content動態寬度。

.main

.logo

.content

.content > .notice

.notice可能會非常長,一些裝置下需要隱藏顯示,即不換行,並留下省略符…作標記。

這裡會發現text-overflow: ellipsis不生效,省略符根本沒有出現。而且因為設定了 nowrap 會發現文字會將 content 撐開,導致內容超出了螢幕。所以必須要解決這個問題。

嘗試取消父元素.content的flex: 1,無效。

嘗試取消.main容器的display: flex,省略號出現。

因此猜測是flex布局的問題,進一步猜測省略符需要對父元素限定寬度。

嘗試對父元素.content設定width: 100%無效,但是設定width: 0可行。即:

方法一:

.content

如果不設定寬度,.content可以被子節點無限撐開;因此.notice總有足夠的寬度在一行內顯示所有文字,也就不能觸發截斷省略的效果。

方法二:

.content

上面的二種方法都可以達到我們需要的效果,即給 content 設定了 flex 為 1 的時候,它會動態的獲得父容器的剩餘寬度,且不會被自己的子元素把內容撐開。

帶標籤體的標籤和父標籤的標籤

帶有標籤體的自定義標籤 1 若有乙個標籤體 c1 date sssss c1 date 在自定義標籤的標籤處理器中使用jspfragment物件封裝了標籤體的資訊 若配置了標籤含有標籤體,則jsp會呼叫setjspbody 方法把jspfragment傳遞給標籤處理類。在 tagsupport中還定...

Jquery獲取父標籤

1 在jquery中提供三個獲取父標籤的方法 id parent jquery實現原理,獲取element的parentnode,如果parentnode為document,則返回null parent function elem id parents 返回父標籤陣列 jquery實現原理,呼叫di...

帶父標籤的自定義標籤

開發有父標籤的標籤 1.父標籤無法獲取子標籤的引用,父標籤僅把子標籤作為標籤體來使用.2.子標籤可以通過 getparent 方法來獲取父標籤的引用 需繼承 tagsupport 或自實現 tag 介面的該方法 若子標籤的確有父標籤,jsp 引擎會把代表父標籤的引用通過 setparent jspt...