即text-overflow:ellipsis，需要配合white-space:nowrap使用。

運(yùn)行代碼：

[提示：你可先修改部分代碼，再按運(yùn)行]

?

在進(jìn)行DivCSS布局時(shí)，需要對文本進(jìn)行控制，今天系統(tǒng)的向大家介紹一下。CSS中控制換行的四種屬性。
　　一、white-space
　　可以實(shí)現(xiàn)HTML中PRE標(biāo)簽的效果，以及單元格的noWrap效果。
　　語法：
　　white-space?:?normal?|?pre?|?nowrap
　　取值：
　　normal：?默認(rèn)值。默認(rèn)處理方式。文本自動(dòng)處理換行。假如抵達(dá)容器邊界內(nèi)容會(huì)轉(zhuǎn)到下一行
　　pre：?換行和其他空白字符都將受到保護(hù)。這個(gè)值需要IE6+或者?!DOCTYPE?聲明為?standards-compliant?mode?支持。如果?!DOCTYPE?聲明沒有指定為?standards-compliant?mode?，此屬性可以使用，但是不會(huì)發(fā)生作用。結(jié)果等同于?normal?。參閱?pre?對象
　　nowrap：?強(qiáng)制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇?br?對象。參閱?noWrap?屬性
　　說明：
　　設(shè)置或檢索對象內(nèi)空格字符的處理方式。
　　空格字符，像換行，空格，TAB，在HTML文檔中默認(rèn)的是被忽略的。當(dāng)此屬性設(shè)置為?normal?或者?nowrap?時(shí)，你可以使用不換行空格的命名實(shí)體?來添加空格，用?br?元素來添加換行。此屬性對你使用文檔對象模型(DOM)操作的內(nèi)容的影響與其對IE顯示內(nèi)容的影響一樣。
　　此屬性作用于塊對象。
　　相關(guān)樣式：
　　text-overflow
　　將它與white-space結(jié)合使用就不用再寫程序來判斷字符串長度了，點(diǎn)此查看示例。
　　語法：
　　text-overflow?:?clip?|?ellipsis
　　取值：
　　clip：默認(rèn)值。不顯示省略標(biāo)記(…)，而是簡單的裁切
　　ellipsis：當(dāng)對象內(nèi)文本溢出時(shí)顯示省略標(biāo)記(…)
　　說明：
　　設(shè)置或檢索是否使用一個(gè)省略標(biāo)記(…)標(biāo)示對象內(nèi)文本的溢出。
　　這個(gè)屬性僅僅作用于水平內(nèi)聯(lián)方向的，普通的西方文本的溢出。內(nèi)聯(lián)溢出發(fā)生在行內(nèi)的文本超出可用寬度卻沒有換行機(jī)會(huì)的時(shí)候。
　　要強(qiáng)制溢出發(fā)生并且應(yīng)用?ellipsis?值，作者必須設(shè)置對象的?white-space?屬性值為?nowrap?。
　　假如沒有換行機(jī)會(huì)(例如，對象容器的寬度是狹窄的，而內(nèi)有很長的沒有合理斷行的文本)，沒有應(yīng)用?nowrap?也有可能溢出。
　　為了使?ellipsis?值被應(yīng)用，此屬性必須被設(shè)置到具有不可視區(qū)域的對象。最好的選擇是設(shè)置?overflow?屬性為?hidden?。設(shè)置?overflow?屬性為?scroll?或者?auto?時(shí)，此屬性也會(huì)應(yīng)用。但是會(huì)有滾動(dòng)條出現(xiàn)。
　　通過選擇省略標(biāo)記，隱藏的文本可以被選擇。當(dāng)選擇發(fā)生時(shí)，省略標(biāo)記會(huì)隱藏而被文本替換。
　　此屬性為在DHTML中制作省略標(biāo)記提供了高效的方法。
　　二、word-break
　　最常用的控制換行屬性，常與下面的word-wrap結(jié)合使用。
　　語法：
　　word-break?:?normal?|?break-all?|?keep-all? 　　取值：
　　normal：?默認(rèn)值。允許在詞間換行
　　break-all：該行為與亞洲語言的?normal?相同。也允許非亞洲語言文本行的任意字內(nèi)斷開。該值適合包含一些非亞洲文本的亞洲文本
　　keep-all：與所有非亞洲語言的?normal?相同。對于中文，韓文，日文，不允許字?jǐn)嚅_。適合包含少量亞洲文本的非亞洲文本
　　說明：
　　設(shè)置或檢索對象內(nèi)文本的字內(nèi)換行行為。尤其在出現(xiàn)多種語言時(shí)。
　　對于中文，應(yīng)該使用?break-all?。
　　三、word-wrap
　　如果你設(shè)計(jì)的網(wǎng)頁不是自適應(yīng)寬度的話，需要將它設(shè)置為break-word，否則可能出現(xiàn)版快錯(cuò)開的情況。
　　語法：
　　word-wrap?:?normal?|?break-word
　　取值：
　　normal：默認(rèn)值。允許內(nèi)容頂開指定的容器邊界
　　break-word：內(nèi)容將在邊界內(nèi)換行。如果需要，詞內(nèi)換行(?word-break?)也將發(fā)生
　　說明：
　　設(shè)置或檢索當(dāng)當(dāng)前行超過指定容器的邊界時(shí)是否斷開轉(zhuǎn)行。
　　此屬性僅作用于有布局的對象，如塊對象。內(nèi)聯(lián)要素要使用該屬性，必須先設(shè)定對象的?height?或?width?屬性，或者設(shè)定?position?屬性為?absolute?，或者設(shè)定?display?屬性為?block?。
　　四、overflow，overflow-x，overflow-y
　　這個(gè)不是嚴(yán)格意思上的控制換行樣式，但在某些時(shí)候?qū)⑺O(shè)置為hidden可以補(bǔ)充word-wrap的不足，比方你想在限制寬度里僅顯示一行文字，而這行文?字的長度卻超過這個(gè)寬度，結(jié)合white-space+text-overflow可以達(dá)到更好的效果。
　　語法：
　　overflow?:?visible?|?auto?|?hidden?|?scroll
　　取值：
　　visible：?默認(rèn)值。不剪切內(nèi)容也不添加滾動(dòng)條。假如顯式聲明此默認(rèn)值，對象將以包含對象的?window?或?frame?的尺寸裁切。并且?clip?屬性設(shè)置將失效
　　auto：在必需時(shí)對象內(nèi)容才會(huì)被裁切或顯示滾動(dòng)條
　　hidden：不顯示超過對象尺寸的內(nèi)容
　　scroll：總是顯示滾動(dòng)條
　　說明：
　　檢索或設(shè)置當(dāng)對象的內(nèi)容超過其指定高度及寬度時(shí)如何管理內(nèi)容。
　　所有對象的默認(rèn)值是?visible?，除了?textarea?對象和?body?對象的默認(rèn)值是?auto?。設(shè)置?textarea?對象此屬性值為?hidden?將隱藏其滾動(dòng)條。
　　對于?table?來說，假如?table-layout?屬性設(shè)置為?fixed?，則?td?對象支持帶有默認(rèn)值為?hidden?的?overflow?屬性。如果設(shè)為?scroll?或者?auto?，那么超出?td?尺寸的內(nèi)容將被剪切。如果設(shè)為?visible?，將導(dǎo)致額外的文本溢出到右邊或左邊(視?direction?屬性設(shè)置而定)的單元格。
　　自IE5開始，此屬性在MAC平臺(tái)上可用。
　　自IE6開始，當(dāng)你使用?!DOCTYPE?聲明指定了?standards-compliant?模式，此屬性可以應(yīng)用于?html?對象。?

?

轉(zhuǎn)載于:https://www.cnblogs.com/sallon/p/3229487.html

總結(jié)

以上是生活随笔為你收集整理的文字超长自动省略，以...代替，CSS实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。