您現在的位置是:電腦技術吧?>? 故障問題 ??>??怎么換行,換行??>??正文詳情

怎么換行,換行

力良駿2019-11-07 18:52:11 人圍觀
簡介同個換行常見的文本段落換行情況表明,在實際應用中,我們經常會遇到這樣一個問題:一個段落的文本具有清晰的寬度,需要自動換行案例分析(如下圖所示):以上兩個圖不使用任

普通文本段落的換行  案例說明:在實際應用中我們常遇到這樣的問題,就是一段文本,有了明確的寬度,需要文本自動換行。

(如下圖)

  案例分析:上面兩個圖,沒有使用任何排版的CSS屬性,也就是默認情況下,塊元素里的文本,達到邊緣以后會自動換行。

但是這里有個特例:就是內容全部為英文字母(沒有單詞句子,沒有詞和詞之間的空格),此時文本就不自動換行了(見下圖)

  特殊情況:有時候你寫的東東,默認情況下并不自動換行,這多半是由于你在其他的CSS屬性設置里,無意中關聯了那個段話。

比如你的 p 元素無意中有了 white-space: nowrap

  多行鏈接或文本的換行

  上圖代碼:  li { display: inline }  a { padding: 0 1.2em }  案例分析:上圖采用了大家常用的列表來排版文本。

只需要把 li 的顯示屬性設為行內,就可以達到自動換行。

但是這樣會有一點小瑕疵。

不知大家注意到沒,本來標簽a有左右padding,第二行確是頂頭顯示。

由于這是一個鏈接被分行了,顯示并沒錯,但顯示效果并不夠完美。

繼續往下看

  上圖有個小瑕疵,就是歌手名被分行,會給瀏覽者帶來不愉快的感覺。

這時候我們需要把每個歌手看做整體,并強制文字在這個整體中不換行,而是讓這個塊狀的整體自動換行,如下圖。

  這樣看起來美觀過了,是怎么做到的呢,看下代碼:  li { display:inline; float:left}  a { padding: 0 1.2em; display: block; white-space:nowrap}  代碼解釋:display:inline意圖在于消除IE6雙倍margin的bug,white-space:nowrap忽略所有空格回車等元素,目的是強制文字在該塊里不換行。

如果不強制換行,當寬度不合適時就會出現下圖癥狀。

  除此之外,還有其他解決方案,比如讓上面的 【a】也浮動,這樣它的寬度,就變成自適應。

  總結:  對于同樣的效果,通過CSS可以有很多種實現方法,到底哪種更優秀,需要長時間經驗積累。

  下一篇我正在策劃CSS系統布局和排版,意思就是站在整個網站層面上,統一布局,而不單是針對一個頁面。

  為什么有這個打算。

現在很多站,尤其是CMS建起來的,往往頁面優化不夠,造成瀏覽速度不夠快。

很多站長抱怨空間速度不行,想花大價錢買好空間。

其實完全可以從頁面優化入手。

版權聲明:本文由 力良駿 整理編輯。

原標題:格內換行,表格怎么換行上下換行

轉載注明出處:http://www.dn9ww09s.icu/fault/11505.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦沒有hdmi接口怎么辦,電腦有hdmi接口嗎

    電腦沒有hdmi接口怎么辦,電腦有hdmi接口嗎 相關圖片hdmi接口HDMI的英文全稱是“高清多媒體”,中文是高清多媒體接口HDMI接口可提供高達5Gbps的數據傳輸帶寬,可傳輸未壓縮音頻信號和高分辨率視頻信號hdmi接口有幾種...

  • css的三種樣式,css四種樣式

    css的三種樣式,css四種樣式 相關圖片css樣式表的三種方式首先,in line style使用style屬性將CSS直接寫入HTML標記,例如:pstyle=color:red此行將顯示為紅色/P注意:style屬性可css外部樣式...

  • intel cpu,英特爾cpu

    intel cpu,英特爾cpu 相關圖片intel cpu天梯圖我的電腦不能打印字體這些問題通常是剛接觸電腦的新朋友提出的雖然解決方法很簡單,但對于新手來說,如果沒有人指出,可能無法自己找出方法那么如何解決電腦打字...

  • 如何查看手機使用記錄,查看手機使用記錄

    如何查看手機使用記錄,查看手機使用記錄 相關圖片手機瀏覽記錄怎么查個人電腦是更私人的東西我們將在使用電腦的過程中儲存一些難看的東西隨著時間的推移,我們想知道是否有人把我們的電腦翻了如何檢查查一下電腦的歷史運行記...

  • 標簽的定義,給自己定義一個標簽

    標簽的定義,給自己定義一個標簽 相關圖片A標簽定義和用法注釋標簽用于在源文檔中插入注釋瀏覽器將忽略注釋可以使用注釋來解釋代碼,這有助于以后對其進行編輯您還可以將為程序定制的信息存儲在注釋內容中在這種情況下...

  • 電腦關機自動重啟怎么解決,電腦關機老是自動重啟

    電腦關機自動重啟怎么解決,電腦關機老是自動重啟 相關圖片電腦關機自動重啟是什么原因有網友遇到關機的問題,以前很好斷電后,每次關機后都會立即重新啟動計算機一直這樣流傳他們對電腦了解不多,所以在網上尋求幫助為什么會這樣怎么...

  • p標簽會自動換行嗎,p標簽不自動換行

    p標簽會自動換行嗎,p標簽不自動換行 相關圖片table標簽自動換行pre標記不會自動包裝,使用起來有點麻煩,但現在很少使用。但是如果你用的時候需要把線包起來呢?下面是一個CSS解決方案,解決了包裝前標簽的問題。它支持各種瀏...

  • win7顯示隱藏文件設置,如何顯示隱藏文件

    win7顯示隱藏文件設置,如何顯示隱藏文件 相關圖片電腦顯示隱藏文件有時有些人會使用自己的電腦,他們不想讓人們看到一些小東西這種方法雖然不是很保密,但是非常快捷方便,所以很多人會選擇這種方式來隱藏自己的小秘密。如何...

  • 創造與魔法狼王屬性,創造與魔法寵物

    創造與魔法狼王屬性,創造與魔法寵物 相關圖片創造與魔法遺跡怎么進入原則上,相同顏色和不同顏色的兩個詞重疊在一起。通過分別添加clip屬性,將上下兩個單詞切割成不同的位置,從而產生兩種不同的顏色測試環境Firefox 1.5、I創...

  • 電腦老是自動重啟,電腦突然自動重啟

    電腦老是自動重啟,電腦突然自動重啟 相關圖片電腦開機一直重啟主機更換內存模塊后,開機后電腦會自動重啟只有切斷電源,它才能停止否則,計算機將自動重新啟動并成為一個死循環我該怎么辦別擔心。接下來,我將分享自動重...

熱評文章

  • win10電腦插耳機沒聲音,電腦耳機沒聲音怎么設置 windows

    win10電腦插耳機沒聲音,電腦耳機沒聲音怎么設置 windows 相關圖片win10插了耳機還外放計算機遇到各種問題是正常的耳機沒有聲音也是一個常見的問題這通常是一個駕駛問題或設置問題很容易解決有此問題的朋友可以看到以下解決方案據信,經常玩電腦...

  • 電腦cpu散熱硅脂,cpu上的硅脂

    電腦cpu散熱硅脂,cpu上的硅脂 相關圖片cpu硅脂在臺式機的CPU上涂抹硅脂是非常重要的它關系到計算機的綜合性能和CPU的使用壽命有必要知道計算機CPU的重要性,即核心處理器有個朋友不知道怎么涂硅脂,CPU直接cpu散熱硅脂排...

  • 什么地漫談,漫談

    什么地漫談,漫談 相關圖片心漫談我們對HTML5有很高的期望希望它能繼承web應用開發簡單、部署升級方便、跨平臺、本地應用等功能強大、操作簡單友好的優點我還談到了為什么HTML5如此流行,為什漫談式...

  • 路由器怎么連接筆記本,筆記本連接路由器

    路由器怎么連接筆記本,筆記本連接路由器 相關圖片無線網隱藏了筆記本怎么連接越來越多的人使用電腦有些人有不止一臺電腦如果他們想同時訪問互聯網,他們需要使用路由器與有線路由器相比,無線路由器更受歡迎但如何將筆記本電...

  • 3動畫,補間動畫

    3動畫,補間動畫 相關圖片c4d動畫HTML的第一個例子中的HTML標記非常簡單我們在頁面上創建一個UL列表標記,并在其中創建幾個div來控制其整體進度動畫代碼如下:123456789101213傳統補間動畫...

  • as ssd benchmark,ssdbenchmark怎么看

    as ssd benchmark,ssdbenchmark怎么看 相關圖片ssd固態硬盤測試軟件現在很多學生已經更換了固態硬盤,當然,他們也想測試它的性能比原來的機械硬盤快多少然后作為SSD基準,幫助用戶檢測SSD的連續讀取as ssd下載...

  • 文字放置,文字放置類

    文字放置,文字放置類 相關圖片放置文字掛機游戲CSS不依賴于容器的底部來對齊文本布局參數,一個好的方法也更好即使用position屬性來解決問題看下面的代碼,利用位置的相對定位和絕對定位功能,很容易實現DI純文...

  • 電腦主要看什么配置,買電腦主要看哪些配置

    電腦主要看什么配置,買電腦主要看哪些配置 相關圖片如何查看電腦配置參數隨著網絡時代的到來,計算機的普及程度越來越高面對電腦問題,仍然有很多問題其他學校的很多人都會問,買電腦時需要看什么樣的配置,什么樣的品牌又好又...

  • 什么是元素,元素

    什么是元素,元素 相關圖片元素B教程詳細信息摘要:HTML5詳細信息標簽困難:主要支持瀏覽器:Chrome 12 版本我最喜歡的新HTML5標簽是details元素,它剛剛集成到Chrome的E元素...

  • 電腦顯示器調亮度,電腦顯示屏怎么調亮度調節

    電腦顯示器調亮度,電腦顯示屏怎么調亮度調節 相關圖片臺式電腦屏幕亮度怎么調電腦基本上是人手,很多人每天都會用電腦瀏覽網頁、上網、看視頻、面對電腦屏幕,眼睛有點受不了,對吧屏幕亮度是個大問題,那么如何調整電腦屏幕亮度...

關注微信

变脸官网查询