這篇“css設(shè)置文字1行的方法”文章,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要參考一下,對(duì)于“css設(shè)置文字1行的方法”,小編整理了以下知識(shí)點(diǎn),請(qǐng)大家跟著小編的步伐一步一步的慢慢理解,接下來(lái)就讓我們進(jìn)入主題吧。
創(chuàng)新互聯(lián)公司從2013年創(chuàng)立,公司以做網(wǎng)站、網(wǎng)站建設(shè)、系統(tǒng)開(kāi)發(fā)、網(wǎng)絡(luò)推廣、文化傳媒、企業(yè)宣傳、平面廣告設(shè)計(jì)等為主要業(yè)務(wù),適用行業(yè)近百種。服務(wù)企業(yè)客戶(hù)1000多家,涉及國(guó)內(nèi)多個(gè)省份客戶(hù)。擁有多年網(wǎng)站建設(shè)開(kāi)發(fā)經(jīng)驗(yàn)。為企業(yè)提供專(zhuān)業(yè)的網(wǎng)站建設(shè)、創(chuàng)意設(shè)計(jì)、宣傳推廣等服務(wù)。 通過(guò)專(zhuān)業(yè)的設(shè)計(jì)、獨(dú)特的風(fēng)格,為不同客戶(hù)提供各種風(fēng)格的特色服務(wù)。
css是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言,主要是用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式,使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言,并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中,而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定,從而實(shí)現(xiàn)級(jí)聯(lián)效果,發(fā)展至今,css不僅能裝飾網(wǎng)頁(yè),也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。
css設(shè)置文字1行的方法:首先設(shè)置“inline-block;”屬性;然后通過(guò)“white-space: nowrap;”屬性實(shí)現(xiàn)文字強(qiáng)制不換行;最后實(shí)現(xiàn)隱藏超出部分即可。
CSS 設(shè)置文字只顯示一行,多余顯示省略號(hào)
CSS 設(shè)置文字只顯示一行
.view-text{ /** 思路: 1.設(shè)置inline-block屬相 2.強(qiáng)制不換行 3.固定高度 4.隱藏超出部分 5.顯示“……” */ display: inline-block; white-space: nowrap; width: 100%; overflow: hidden; text-overflow:ellipsis; }
附:顯示兩行
熱賣(mài)精選:從子頻道(服飾鞋包,親子,居家,美妝)檔期里面挑選出來(lái),庫(kù)存大于30%的高信價(jià)比商品list,數(shù)量為50個(gè)/** 思路: 1.超出的文本隱藏 2.溢出用省略號(hào)顯示 3.溢出不換行 4.將對(duì)象作為彈性伸縮盒子模型顯示 5.從上到下垂直排列子元素(設(shè)置伸縮盒子的子元素排列方式) 6.這個(gè)屬性不是css的規(guī)范屬性,需要組合上面兩個(gè)屬性,表示顯示的行數(shù) */ .text2{ width:200px; word-break:break-all; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
以上是“css設(shè)置文字1行的方法”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!