解決span自動換行以及樣式margin的問題

2021-07-31 10:57:31 字數 453 閱讀 4863

因為span預設是行屬性,而div預設是塊屬性,所以span是無法實現margin-top,margin-bottom,設定也會失效。

當然span也不根據長度自動換行。

解決辦法:

1、把display設定為:inline-block

元素display屬性的常見值說明:

block:塊物件的預設值。將物件強制作為塊物件呈遞,為物件之後新增新行。(只會實現換行,乙個span一行)

inline:內聯物件的預設值。將物件強制作為內聯物件呈遞,從物件中刪除行。

inline-block:將物件呈遞為內聯物件,但是物件的內容作為塊物件呈遞。旁邊的內聯物件會被呈遞在同一行內。

non:隱藏物件。與 visibility 屬性的hidden值不同,其不為被隱藏的物件保留其物理空間。

2、新增float: left;

可以實現自動換行,以及自適應高度

關於span標籤內文字自動換行

white space 通過html文件的源 的排版方式控制頁面顯示文字的排版方式 取值 normal pre nowrap pre wrap pre line inherit normal 正常無變化 預設處理方式.文字自動處理換行.假如抵達容器邊界內容會轉到下一行 pre 保持html源 的空格...

解決span中的內容不換行

span white space 通過html文件的源 的排版方式控制頁面顯示文字的排版方式 取值 normal pre nowrap pre wrap pre line inherit normal 正常無變化 預設處理方式.文字自動處理換行.假如抵達容器邊界內容會轉到下一行 pre 保持html...

HTML CSS樣式中,自動換行

在專案實際應用中出現了 的內容不會換行,本文列舉了相容 ie 和 ff 的換行 css 推薦樣式,詳細介紹了word wrap和word break的區別。相容 ie 和 ff 的換行 css 推薦樣式 最好的方式是 style word wrap break word overflow hidde...