資訊專欄INFORMATION COLUMN
摘要：原理兩個盒子，文字內(nèi)容放于盒子，固定盒子的高度及行高，超出的內(nèi)容隱藏，在結(jié)尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。
解說一中的方法不兼容火狐、IE瀏覽器，所以解說二會給出通用的css寫法。
原理：兩個盒子a、b，文字內(nèi)容放于盒子b，固定盒子a的高度及行高，超出a的內(nèi)容隱藏，在結(jié)尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。
.a{
width: 300px;
/*想要顯示幾行，高度就是行高*倍數(shù)*/
height: 52px;
line-height: 26px;
overflow: hidden;
border: 1px solid #ffffd;
}
.a::before{
float: left;
width: 5px;
content: "";
}
.a::after{
height: 26px;
content: "...";
line-height: 26px;
width: 3em;/* 省略號寬度 */
margin-left: -1em;/* 使省略號在文字的最末端 */
position: relative;
top: 26px;
left: 100%;
background-color: #fff;
}
.b{
float: right;
margin-left: -5px;
width: 100%;
line-height: 26px;
word-break: break-all;
}
在網(wǎng)頁開發(fā)中，經(jīng)常會遇到文本超出了限定的范圍，尤其是屏幕尺寸的大小導(dǎo)致的，著實影響美觀， 這個時候，就需要用css對其進行處理。下面的方法是我在實際工作中總結(jié)出來的，給大家參考一下。
超出盒子a的內(nèi)容都被隱藏掉了，在第二行結(jié)尾處，用‘...’覆蓋了其他的文字，效果如下圖所示：
這個方法存在的問題是：使用的文字的格式，內(nèi)容的不同，有可能放置的省略號的位置可能不會那么正好合適，如果有更合理的方式，歡迎留言解答。如下圖所示：
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/104708.html
摘要：原理兩個盒子，文字內(nèi)容放于盒子，固定盒子的高度及行高，超出的內(nèi)容隱藏，在結(jié)尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。 解說一中的方法不兼容火狐、IE瀏覽器，所以解說二會給出通用的css寫法。 原理：兩個盒子a、b，文字內(nèi)容放于盒子b，固定盒子a的高度及行高，超出a的內(nèi)容隱藏，在結(jié)尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。showImg(https://segmentfa...
摘要：原理兩個盒子，文字內(nèi)容放于盒子，固定盒子的高度及行高，超出的內(nèi)容隱藏，在結(jié)尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。 解說一中的方法不兼容火狐、IE瀏覽器，所以解說二會給出通用的css寫法。 原理：兩個盒子a、b，文字內(nèi)容放于盒子b，固定盒子a的高度及行高，超出a的內(nèi)容隱藏，在結(jié)尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。showImg(https://segmentfa...
摘要：在網(wǎng)頁開發(fā)中，經(jīng)常會遇到文本超出了限定的范圍，尤其是屏幕尺寸的大小導(dǎo)致的，著實影響美觀，這個時候，就需要用對其進行處理。再補充一條，比如想讓內(nèi)容在第二行的時候，超出部分隱藏這個處理方式的目前只兼容內(nèi)核的瀏覽器其他方法見解說二 在網(wǎng)頁開發(fā)中，經(jīng)常會遇到文本超出了限定的范圍，尤其是屏幕尺寸的大小導(dǎo)致的，著實影響美觀，這個時候，就需要用css對其進行處理。 下面的方法是我在實際工作中總結(jié)...
摘要：理解和的區(qū)別從易于區(qū)分和理解的角度，我引用了無雙在你真的了解和的區(qū)別嗎一文中對兩個屬性作用的解釋屬性用來標明是否允許瀏覽器在單詞內(nèi)進行斷句，這是為了防止當一個字符串太長而找不到它的自然斷句點時產(chǎn)生溢出現(xiàn)象。 white-space 、 word-wrap 和 word-break 是決定段落中的文本如何展示的3個css屬性，屬性說明請點擊鏈接查看參考手冊。 white-space wh...
閱讀 2363·2021-11-24 10:34
閱讀 3347·2021-11-22 11:58
閱讀 3938·2021-09-28 09:35
閱讀 2070·2019-08-30 15:53
閱讀 3106·2019-08-30 14:11
閱讀 1783·2019-08-29 17:31
閱讀 787·2019-08-26 13:53
閱讀 2370·2019-08-26 13:45
