CSS代碼使純英文數(shù)字自動(dòng)換行的簡(jiǎn)單實(shí)現(xiàn)

當(dāng)一個(gè)定義了寬度的塊狀元素中填充的全部為純英文或者純數(shù)字的時(shí)候,在IE和FF中都會(huì)撐大容器,不會(huì)自動(dòng)換行
并且當(dāng)數(shù)字或者英文中帶有漢字時(shí),會(huì)從漢字處換行,而純漢字卻可以自動(dòng)換行。這個(gè)問題如何解決?先來認(rèn)識(shí)一下兩位主角word-wrap和word-break
word-wrap用來控制css換行
兩種取值:
(1) normal
(2) break-word(此值用來強(qiáng)制換行,內(nèi)容將在邊界內(nèi)換行,中文沒有任何問題,英文語(yǔ)句也沒問題。但是對(duì)于長(zhǎng)串的英文,就不起作用。)
word-break用來控制斷詞
三種取值:
(1)normal
(2)break-all(是斷開單詞。在單詞到邊界時(shí),下個(gè)字母自動(dòng)到下一行。主要解決了長(zhǎng)串英文的問題。)
(3)keep-all(是指Chinese, Japanese, and Korean不斷詞,一句話一行,可以用來排列古詩(shī)喲~)
【解決方法】
可以在CSS中加入
word-wrap:break-word;
word-break:break-all;
以上就是小編為大家?guī)淼腃SS代碼使純英文數(shù)字自動(dòng)換行的簡(jiǎn)單實(shí)現(xiàn)全部?jī)?nèi)容了,希望大家多多支持腳本之家~
相關(guān)文章
css控制文字自動(dòng)換行的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猚ss控制文字自動(dòng)換行的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-12CSS控制文本超出指定寬度顯示省略號(hào)和文本不換行效果的實(shí)現(xiàn)
下面小編就為大家?guī)硪黄狢SS控制文本超出指定寬度顯示省略號(hào)和文本不換行效果的實(shí)現(xiàn)。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-05-05- 這篇文章主要介紹了CSS超出文本指定寬度用省略號(hào)代替和文本不換行的相關(guān)資料,小編覺的實(shí)用性非常,特此分享到腳本之家平臺(tái),供大家參考2016-05-05
CSS自動(dòng)換行、強(qiáng)制不換行、強(qiáng)制斷行、超出顯示省略號(hào)
這篇文章主要介紹了CSS自動(dòng)換行、強(qiáng)制不換行、強(qiáng)制斷行、超出顯示省略號(hào)的相關(guān)資料,需要的朋友可以參考下2016-04-26用CSS實(shí)現(xiàn)textArea中的placeholder換行功能
這篇文章主要介紹了用CSS實(shí)現(xiàn)textArea中的placeholder換行功能,依照傳統(tǒng)方法書寫的話會(huì)出現(xiàn)問題,文中給出了解決方法,需要的朋友可以參考下2015-07-08CSS強(qiáng)制換行對(duì)齊的實(shí)現(xiàn)方法
這篇文章主要為大家介紹了CSS強(qiáng)制換行對(duì)齊的實(shí)現(xiàn)方法,涉及css中text-justify屬性的使用技巧,需要的朋友可以參考下2015-05-12- 這篇文章主要為大家介紹了CSS實(shí)現(xiàn)連續(xù)字符換行的方法,設(shè)計(jì)CSS的word-break屬性使用方法,需要的朋友可以參考下2015-05-12