(1)overflow: hidden
overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。這個(gè)屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會如何處理。hidden 表示內(nèi)容會被修剪，并且剪掉的內(nèi)容是不可見的。

(2)white-space: nowrap
規(guī)定文本不進(jìn)行換行。white-space 屬性設(shè)置如何處理元素內(nèi)的空白。nowrap 表示文本不會換行，文本會在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。

(3)text-overflow: ellipsis
text-overflow 屬性規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情。ellipsis 表示顯示省略符號來代表被修剪的文本。

(4)width:100px
width 屬性設(shè)置div的長度,值得一提的是在響應(yīng)式中,width是根據(jù)lg,md,sm,xs自動設(shè)定的無需操作;(我們的優(yōu)化相當(dāng)于處理元素內(nèi)部的間距部分的空白);

(4)eg:

#main_content a{

　　　width:31px;

　　　display:none;內(nèi)聯(lián)是使用;
?? ??? ?word-break:keep-all;/* 不換行 */只能在半角空格或連字符處換行。
?? ??? ?white-space:nowrap;/* 不換行 */
?? ??? ?overflow:hidden;/* 內(nèi)容超出寬度時(shí)隱藏超出部分的內(nèi)容 */
?? ??? ?text-overflow:ellipsis;/* 當(dāng)對象內(nèi)文本溢出時(shí)顯示省略標(biāo)記(...) ；需與overflow:hidden;一起使用。*/
?? ??? ?}

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

總結(jié)

以上是生活随笔為你收集整理的Bootstrap的响应式,当文字超过div长度,换行问题的处理!的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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