關(guān)于網(wǎng)頁(yè)中文字自動(dòng)換行(div/pre)

在網(wǎng)頁(yè)中鸟整,又是會(huì)用于顯示一段文字,但預(yù)先并不知道朦蕴,文字的長(zhǎng)度及內(nèi)容篮条,此時(shí),我們大多采用填充div或pre的方式來(lái)顯示文字吩抓。

使用div元素時(shí)涉茧,確定了寬度加上以下兩個(gè)屬性,即可保證填充在div中的文字自動(dòng)換行疹娶。

word-wrap: break-word;   
//word-wrap 屬性允許長(zhǎng)單詞或 URL 地址換行到下一行伴栓。
//break-word在長(zhǎng)單詞或 URL 地址內(nèi)部進(jìn)行換行。
word-break: break-all;
//word-break 屬性規(guī)定自動(dòng)換行的處理方法雨饺。

使用pre元素時(shí)钳垮,類似的,也加上以下兩個(gè)屬性额港,其內(nèi)文字即可自動(dòng)換行饺窿。

white-space: pre-wrap;    //pre-wrap保留空白符序列,但是正常地進(jìn)行換行锹安。
word-break: break-all;
word-wrap: break-word;

div我們大家都熟悉短荐,可以填充文字或其它元素,但文字放在div中時(shí)叹哭,往往不能保持原有格式忍宋,比如空格,回車等。

pre 元素可定義預(yù)格式化的文本风罩。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符糠排。而文本也會(huì)呈現(xiàn)為等寬字體。

pre 標(biāo)簽的一個(gè)常見(jiàn)應(yīng)用就是用來(lái)表示計(jì)算機(jī)的源代碼超升。

可以導(dǎo)致段落斷開(kāi)的標(biāo)簽(例如標(biāo)題入宦、p 和 address 標(biāo)簽)絕不能包含在 pre 所定義的塊里哺徊。盡管有些瀏覽器會(huì)把段落結(jié)束標(biāo)簽解釋為簡(jiǎn)單地?fù)Q行,但是這種行為在所有瀏覽器上并不都是一樣的乾闰。

pre 元素中允許的文本可以包括物理樣式和基于內(nèi)容的樣式變化落追,還有鏈接、圖像和水平分隔線涯肩。當(dāng)把其他標(biāo)簽(比如 a 標(biāo)簽)放到 pre 塊中時(shí)轿钠,就像放在 HTML/XHTML 文檔的其他部分中一樣即可。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末病苗,一起剝皮案震驚了整個(gè)濱河市疗垛,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌硫朦,老刑警劉巖贷腕,帶你破解...
    沈念sama閱讀 222,252評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異咬展,居然都是意外死亡泽裳,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,886評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門挚赊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)诡壁,“玉大人济瓢,你說(shuō)我怎么就攤上這事荠割。” “怎么了旺矾?”我有些...
    開(kāi)封第一講書人閱讀 168,814評(píng)論 0 361
  • 文/不壞的土叔 我叫張陵蔑鹦,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我箕宙,道長(zhǎng)嚎朽,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 59,869評(píng)論 1 299
  • 正文 為了忘掉前任柬帕,我火速辦了婚禮哟忍,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘陷寝。我一直安慰自己锅很,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,888評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布凤跑。 她就那樣靜靜地躺著爆安,像睡著了一般。 火紅的嫁衣襯著肌膚如雪仔引。 梳的紋絲不亂的頭發(fā)上扔仓,一...
    開(kāi)封第一講書人閱讀 52,475評(píng)論 1 312
  • 那天褐奥,我揣著相機(jī)與錄音,去河邊找鬼翘簇。 笑死撬码,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的版保。 我是一名探鬼主播耍群,決...
    沈念sama閱讀 41,010評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼找筝!你這毒婦竟也來(lái)了蹈垢?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 39,924評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤袖裕,失蹤者是張志新(化名)和其女友劉穎曹抬,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體急鳄,經(jīng)...
    沈念sama閱讀 46,469評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡谤民,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,552評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了疾宏。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片张足。...
    茶點(diǎn)故事閱讀 40,680評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖坎藐,靈堂內(nèi)的尸體忽然破棺而出为牍,到底是詐尸還是另有隱情,我是刑警寧澤岩馍,帶...
    沈念sama閱讀 36,362評(píng)論 5 351
  • 正文 年R本政府宣布碉咆,位于F島的核電站,受9級(jí)特大地震影響蛀恩,放射性物質(zhì)發(fā)生泄漏疫铜。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,037評(píng)論 3 335
  • 文/蒙蒙 一双谆、第九天 我趴在偏房一處隱蔽的房頂上張望壳咕。 院中可真熱鬧,春花似錦顽馋、人聲如沸谓厘。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,519評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)庞呕。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間住练,已是汗流浹背地啰。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,621評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留讲逛,地道東北人亏吝。 一個(gè)月前我還...
    沈念sama閱讀 49,099評(píng)論 3 378
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像盏混,于是被迫代替她去往敵國(guó)和親蔚鸥。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,691評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接地址 關(guān)注公眾號(hào)獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,560評(píng)論 32 459
  • 1.塊級(jí)元素和行內(nèi)元素 塊級(jí)(block-level)元素许赃;行內(nèi)(內(nèi)聯(lián)止喷、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,014評(píng)論 1 4
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒(méi)有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,066評(píng)論 0 1
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表混聊,主要用...
    寥寥十一閱讀 1,839評(píng)論 0 6
  • 本課來(lái)自http://www.imooc.com/learn/9請(qǐng)不要用作商業(yè)用途弹谁。 HTML5 HTML介紹 H...
    PYLON閱讀 3,234評(píng)論 0 5