資訊專欄INFORMATION COLUMN
摘要：文字越界添加顯示在頁面上，會遇到當文字長度超出一定長度的時候，將超出的部分顯示為的情況，這個功能很好實現(xiàn)，很多人都可以直接寫出來。
文字越界添加...顯示
在HTML頁面上，會遇到當文字長度超出一定長度的時候，將超出的部分顯示為...的情況，這個功能很好實現(xiàn)，很多人都可以直接寫出來。
示例代碼：
.demo {
display: block;
text-overflow: ellipsis; //顯示省略符號來代表被修剪的文本，也可以自定義
overflow: hidden; //溢出內(nèi)容隱藏
white-space:nowrap; //強制文本在一行內(nèi)顯示
}
在文字后面，添加圖標
有時候會遇到復(fù)雜的情況，需要在這段文字后緊跟一個圖標，當文字溢出時，圖標照常顯示在后面。示例如下，圖中的12是一直要顯示的：
這種情況下，就需要對標簽布局進行處理才行，因為 text-overflow 的起作用環(huán)境是一個 ‘block’ 狀態(tài)下的父元素容器里。
示例代碼：
Text 1 Text 2 Text 3 Text 4 Text 512
.inline-wrap {
display: inline-block;
max-width: 100%;
}
.block-wrap {
width: 100%;
}
.block {
position: relative;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-left: 20px;
}
.icon {
position: absolute;
width: 20px;
right: 0;
}
（完）
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111411.html
摘要：文字越界添加顯示在頁面上，會遇到當文字長度超出一定長度的時候，將超出的部分顯示為的情況，這個功能很好實現(xiàn)，很多人都可以直接寫出來。 文字越界添加...顯示 在HTML頁面上，會遇到當文字長度超出一定長度的時候，將超出的部分顯示為...的情況，這個功能很好實現(xiàn)，很多人都可以直接寫出來。示例代碼： .demo { display: block; text-overflow:...
摘要：層疊即表示允許以多種方式來描述樣式，一個元素可以被渲染呈現(xiàn)出多種樣式。可以讓屬性的變化過程持續(xù)一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用后，將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...
摘要：輸入的時候少按一個鍵瀏覽器兼容問題比如使用的選擇器命名，在是無效的能良好區(qū)分變量命名變量命名是用不要純數(shù)字中文等命名，盡量使用英文字母來表示。選擇器和類選擇器最大的不同在于使用次數(shù)上。當需要設(shè)置英文字體時，英文字體名必須位于中文字體名之前。 回顧上一節(jié)HTML 思維導(dǎo)圖 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...
摘要：，，層疊樣式表，請留意層疊概念。為了區(qū)分偽類和偽元素，偽元素采用雙冒號寫法。常見偽類。常見偽元素。和偽元素的用法和下特有的，用于在渲染中向元素邏輯上的頭部或尾部添加內(nèi)容。CSS，cascading style sheet，層疊樣式表，請留意層疊概念。 css3為了區(qū)分偽類和偽元素，偽元素采用雙冒號寫法。 常見偽類——:hover,:link,:active,:targ...
閱讀 1428·2023-04-25 19:51
閱讀 1923·2019-08-30 15:55
閱讀 1737·2019-08-30 15:44
閱讀 2697·2019-08-30 13:58
閱讀 2689·2019-08-29 16:37
閱讀 1069·2019-08-29 15:34
閱讀 3989·2019-08-29 11:05
閱讀 2618·2019-08-28 17:51
