資訊專欄INFORMATION COLUMN
摘要：文字越界添加顯示在頁面上，會遇到當文字長度超出一定長度的時候，將超出的部分顯示為的情況，這個功能很好實現(xiàn)，很多人都可以直接寫出來。
文字越界添加...顯示
在HTML頁面上，會遇到當文字長度超出一定長度的時候，將超出的部分顯示為...的情況，這個功能很好實現(xiàn)，很多人都可以直接寫出來。
示例代碼：
.demo {
display: block;
text-overflow: ellipsis; //顯示省略符號來代表被修剪的文本，也可以自定義
overflow: hidden; //溢出內容隱藏
white-space:nowrap; //強制文本在一行內顯示
}
在文字后面，添加圖標
有時候會遇到復雜的情況，需要在這段文字后緊跟一個圖標，當文字溢出時，圖標照常顯示在后面。示例如下，圖中的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;
}
（完）
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/49980.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ù)上。當需要設置英文字體時，英文字體名必須位于中文字體名之前。 回顧上一節(jié)HTML 思維導圖 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...
摘要：，，層疊樣式表，請留意層疊概念。為了區(qū)分偽類和偽元素，偽元素采用雙冒號寫法。常見偽類。常見偽元素。和偽元素的用法和下特有的，用于在渲染中向元素邏輯上的頭部或尾部添加內容。CSS，cascading style sheet，層疊樣式表，請留意層疊概念。 css3為了區(qū)分偽類和偽元素，偽元素采用雙冒號寫法。 常見偽類——:hover,:link,:active,:targ...
閱讀 2340·2021-11-22 12:01
閱讀 2033·2021-11-12 10:34
閱讀 4558·2021-09-22 15:47
閱讀 2864·2019-08-30 15:56
閱讀 2888·2019-08-30 15:53
閱讀 2430·2019-08-30 13:53
閱讀 3412·2019-08-29 15:35
閱讀 3149·2019-08-29 12:27
