HTML 5 基礎(chǔ)之 文本 強制不換行

在我們開發(fā)網(wǎng)站的過程中常常會遇到文本被強制換行的情況發(fā)生颤介,比如:

強制換行案例

圖中一個完整的 a 標簽被活生生截斷(強制換行),這往往不是我們所想要的袜漩,但是這也是我們無法避免的通殃,因為在網(wǎng)站開發(fā)過程中度液,我們往往無法做到精確計算出能夠完美展示所容納文本格式的空間大小。

遇到這種情況一般的處理思路要么想辦法算距離画舌,要么一點一點的調(diào)節(jié)以達到預(yù)期要求堕担,但是,這樣做既費時又費力曲聂,那么有什么辦法能一勞永逸呢霹购?

其實 CSS 為我們提供了 white-space 屬性
通過設(shè)置

a{white-space:nowrap;}

可以規(guī)定一個完整的 a 標簽中的文本不進行換行,修改后的效果如圖:

修改后的效果圖

當然不僅僅是 a 標簽朋腋,在開發(fā)過程中我們可以對任意的一個文本整體設(shè)定這一屬性齐疙,這樣一來便不會出現(xiàn)一個整體被截斷的情況了。


下面對 white-space 屬性做一個小結(jié):

white-space 屬性指定元素內(nèi)的空白怎樣處理旭咽。

屬性值

描述
normal 默認贞奋。空白會被瀏覽器忽略穷绵。
pre 空白會被瀏覽器保留轿塔。其行為方式類似 HTML 中的 <pre> 標簽。
nowrap 文本不會換行,文本會在在同一行上繼續(xù)催训,直到遇到 <br> 標簽為止洽议。
pre-wrap 保留空白符序列宗收,但是正常地進行換行漫拭。
pre-line 合并空白符序列,但是保留換行符混稽。
inherit 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值采驻。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市匈勋,隨后出現(xiàn)的幾起案子礼旅,更是在濱河造成了極大的恐慌,老刑警劉巖洽洁,帶你破解...
    沈念sama閱讀 206,602評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件痘系,死亡現(xiàn)場離奇詭異,居然都是意外死亡饿自,警方通過查閱死者的電腦和手機汰翠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來昭雌,“玉大人复唤,你說我怎么就攤上這事≈蛭裕” “怎么了佛纫?”我有些...
    開封第一講書人閱讀 152,878評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長总放。 經(jīng)常有香客問我呈宇,道長,這世上最難降的妖魔是什么局雄? 我笑而不...
    開封第一講書人閱讀 55,306評論 1 279
  • 正文 為了忘掉前任甥啄,我火速辦了婚禮,結(jié)果婚禮上哎榴,老公的妹妹穿的比我還像新娘型豁。我一直安慰自己,他們只是感情好尚蝌,可當我...
    茶點故事閱讀 64,330評論 5 373
  • 文/花漫 我一把揭開白布迎变。 她就那樣靜靜地躺著,像睡著了一般飘言。 火紅的嫁衣襯著肌膚如雪衣形。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,071評論 1 285
  • 那天,我揣著相機與錄音谆吴,去河邊找鬼倒源。 笑死,一個胖子當著我的面吹牛句狼,可吹牛的內(nèi)容都是我干的笋熬。 我是一名探鬼主播,決...
    沈念sama閱讀 38,382評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼腻菇,長吁一口氣:“原來是場噩夢啊……” “哼胳螟!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起筹吐,我...
    開封第一講書人閱讀 37,006評論 0 259
  • 序言:老撾萬榮一對情侶失蹤糖耸,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后丘薛,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體嘉竟,經(jīng)...
    沈念sama閱讀 43,512評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,965評論 2 325
  • 正文 我和宋清朗相戀三年洋侨,在試婚紗的時候發(fā)現(xiàn)自己被綠了舍扰。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,094評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡凰兑,死狀恐怖妥粟,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情吏够,我是刑警寧澤勾给,帶...
    沈念sama閱讀 33,732評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站锅知,受9級特大地震影響播急,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜售睹,卻給世界環(huán)境...
    茶點故事閱讀 39,283評論 3 307
  • 文/蒙蒙 一桩警、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧昌妹,春花似錦捶枢、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,286評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至固歪,卻和暖如春蒜鸡,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,512評論 1 262
  • 我被黑心中介騙來泰國打工逢防, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留叶沛,地道東北人。 一個月前我還...
    沈念sama閱讀 45,536評論 2 354
  • 正文 我出身青樓忘朝,卻偏偏與公主長得像灰署,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子辜伟,可洞房花燭夜當晚...
    茶點故事閱讀 42,828評論 2 345

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

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理氓侧,服務(wù)發(fā)現(xiàn),斷路器导狡,智...
    卡卡羅2017閱讀 134,600評論 18 139
  • 1.CSS3 邊框 border-radius CSS屬性用來設(shè)置邊框圓角。當使用一個半徑時確定一個圓形偎痛;當使用兩...
    garble閱讀 634評論 0 0
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,515評論 25 707
  • 北憶南涼年 南思北風暖 南北不知歸路 天地 之大何處是歸程 我為帝王 卻奈何不了...
    my9311閱讀 228評論 1 2
  • 今天早上打開手機朋友圈太多信息旱捧,本能的先看了華服二期朋友圈,第一眼就看到了任貓的分享文章如下: 訓練心得 雖然時間...
    慧好聊吧閱讀 266評論 0 1